https://github.com/alexfigliolia/apple-tv-poster

A Poster component inspired by Apple TV's Poster design
https://github.com/alexfigliolia/apple-tv-poster

animation apple-tv poster react

Last synced: 10 days ago
JSON representation

A Poster component inspired by Apple TV's Poster design

• Host: GitHub
• URL: https://github.com/alexfigliolia/apple-tv-poster
• Owner: alexfigliolia
• Created: 2024-07-29T01:03:30.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-06T19:40:18.000Z (about 1 month ago)
• Last Synced: 2024-10-06T19:41:16.716Z (about 1 month ago)
• Topics: animation, apple-tv, poster, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@figliolia/apple-tv-poster
• Size: 93.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Apple TV Poster

An easy to use Apple TV-like parallax poster for the Web and React.

## Installation

```bash

npm i @figliolia/apple-tv-poster

# or

yarn add @figliolia/apple-tv-poster

```

## Basic Usage

To create a simple Poster, wrap your content in `Poster` tags and begin styling using the class names of your choosing or inline-styles

```tsx

import { Poster } from "@figliolia/apple-tv-poster";

export const MyPoster = () => {

  return (

    

      


        
Great Movie

        Watch Now

      

    

  );

}

```

And that's it! Your poster will animate in 3D space during mouse/touch interactions!


## Advanced Usage - Parallax Poster Content

To create parallax effects inside your posters, the `Poster` component exposes an `onRotation` property. This property receives the x and y rotations as parameters and allows you to compute your own animations based on these values.

```tsx

import { Poster, useParallaxContent } from "@figliolia/apple-tv-poster";

export const MyParallaxPoster = () => {

  const [x, setX] = useState(0);

  const [y, setY] = useState(0);

  const onRotation = useCallback((x: number, y: number) => {

    setX(y / -2.5);

    setY(x / -2.5);

  }, []);

  return (

    

      


        
Great Movie

        Watch Now

      

    

  );

}

```

Now your poster content will transition along with your poster's rotation - creating a cool parallax effect!


## Parallax Poster Content - `useParallaxContent()`

To simplify creating parallax poster content, this library exports a `useParallaxContent()` hook. The hook returns an `onRotation` function for your `Poster` and a `style` object to pass to your poster's children.

```tsx

import { Poster, useParallaxContent } from "@figliolia/apple-tv-poster";

export const MyParallaxPoster = () => {

  const [onRotation, parallaxStyles] = useParallaxContent();

  return (

    

      


        
Great Movie

        Watch Now

      

    

  );

}

```

This hook handles the interpolation of rotation values for your content and smooths animations when mousing in and out of your posters


### Browser Support

This package relies on CSS Custom Properties in order to function. For more detailed information on specific browser version support, please reference the [Can I Use CSS Custom Properties](https://caniuse.com/?search=CSS%20custom%20properties) support tables.