Pro Performance.

Scroll to unwrap the future.

All new architecture.

Redesigned from the ground up to deliver unprecedented speed and efficiency.

Mind-blowing graphics.

Immersive gaming and rendering that pushes the boundaries of reality.

Available today.

Installation

npx kinetic-ui-cli@latest add

Usage

This component acts as a wrapper. It pins its container to the screen and uses GSAP's ScrollTrigger to scrub through animations based on the scroll position.

You can easily orchestrate complex animations by using the built-in generic classes:

`.scrolly-hero`: The central element that scales and moves.
`.scrolly-section`: Sections that correspond to scroll depth.
`.scrolly-text`: Text elements within sections that fade in and out.

import { AppleStyleScrollytelling } from "@/components/creative/apple-style-scrollytelling";

export function ScrollytellingPage() {
  return (
    <AppleStyleScrollytelling totalSections={4}>
      {/* Central hero element */}
      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div className="scrolly-hero bg-indigo-500 w-64 h-64 rounded-xl" />
      </div>

      {/* Sections */}
      <div className="absolute inset-0 w-full h-full">
        <div className="scrolly-section absolute inset-0 flex items-end justify-center pb-32">
          <div className="scrolly-text text-center px-6">
            <h1 className="text-4xl font-bold">First Section</h1>
          </div>
        </div>
        <div className="scrolly-section absolute inset-0 flex items-end justify-center pb-32">
          <div className="scrolly-text text-center px-6 opacity-0">
            <h2 className="text-4xl font-bold">Second Section</h2>
          </div>
        </div>
      </div>
    </AppleStyleScrollytelling>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`undefined`	The content to be rendered inside the sticky container.
`totalSections`	`number`	`4`	The number of scroll height viewport units (100vh) the container will stay pinned for.
`className`	`string`	`undefined`	Additional CSS classes for the outer wrapper.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AppleStyleScrollytelling } from "@/components/creative/apple-style-scrollytelling";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AppleStyleScrollytelling } from "@/components/creative/apple-style-scrollytelling";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AppleStyleScrollytelling
        totalSections{10}
      >
        <div>Content goes here</div>
      </AppleStyleScrollytelling>
    </div>
  );
}

Frequently Used With