NGX Focus Point v19.0.4

Effortlessly manage image and video focus for modern, responsive layouts with NGX Focus Point. Whether your image needs to adapt to portrait, landscape, or square spaces, this Angular component ensures your subject always stays in the spotlight.

No more awkward clipping, misplaced subjects, or resizing issues. NGX Focus Point lets you define the perfect focal point for your media, giving you seamless results across all screen sizes and layouts. 🚀

Demo and Focus Tool

✨ Features

Works with images and videos.
Supports video focus over time with an array of VideoPositions.
React to actions like play, pause, and stop.
Update video position dynamically using time from the parent component.
Control debounceResizeUpdate for performance optimization during resize.
Adjust animation speed with animationSpeed.
Responsive support for different aspect ratios and layouts.
Simple, declarative API—no jQuery required.
Includes a Focus Tool for precise focal point selection.
Integrated with the new ngx-focus-point-video-timeline component.
Optimized for Angular projects.

🚀 Installation

Install via npm

npm i @believablecreations/ngx-focus-point

Install via Yarn

yarn add @believablecreations/ngx-focus-point

🚀 Usage

Example of Video Focus Over Time

Define video positions with an array of VideoPosition:


export interface VideoPosition {
  x: number;
  y: number;
  w?: number;
  h?: number;
  s?: number;
  time: number;
}

export type VideoPositions = Array<VideoPosition>;

Example usage in a component:


<ngx-focus-point [focus]="[
  {x: 0.5, y: 0.5, time: 0},
  {x: 0.7, y: 0.3, s: 1.0, time: 5},
  {x: 0.2, y: 0.8, time: 10}
]" [actions]="'play'" [time]="5" [debounceResizeUpdate]="50" [animationSpeed]="'500ms'">
  <video autoplay loop>
    <source src="your-video.mp4" />
  </video>
</ngx-focus-point>

📦 Standalone Components in Angular 19

As of Angular 19, you can use standalone components. Just import the component and use it directly in your template:

Create a Standalone Component


import { Component } from '@angular/core';
import { NgxFocusPointComponent } from './ngx-focus-point.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxFocusPointComponent],
  template: `
    <ngx-focus-point [focusX]="0.0" [focusY]="0.0" [scale]="1">
      <img src="your-image.jpg" alt="Sample Image" />
    </ngx-focus-point>
  `,
})
export class AppComponent {}

Use 'ngx-focus-point' Component

Define your focal point using focusX and focusY:


<ngx-focus-point [focusX]="0.0" [focusY]="0.0">
  <img src="your-image.jpg" />
</ngx-focus-point>

Video Support (as of version 14)


<ngx-focus-point [focusX]="0.0" [focusY]="0.0">
  <video autoplay loop muted="true" playsinline webkit-playsinline="true">
    <source src="your-video.mp4" />
  </video>
</ngx-focus-point>

Use 'ngx-focus-point-select' Component

Capture the focal point dynamically:


<ngx-focus-point-select (positionChange)="updateFocus($event)" src="your-image.jpg"></ngx-focus-point-select>

PositionModel Structure:


PositionModel {
  x: number;
  y: number;
  w: number;
  h: number;
  s?: number;
}

🌐 Links

Built with ❤️ by Believable Creations.

Cart