Cinematic Interactions

Scroll drives the animation

Both pin a section. What differs is what you have to supply.

Apple-Style Sticky Scroll

A section should pin and transform as the page travels through it. Runs on markup you already have, and reverses cleanly when someone scrolls back up.

Scrubbable Video Reveal

You have an exported frame sequence and want a product to turn under the reader's hand. Every frame is a download, so price that before committing.

Scroll through a catalogue

Color Archive Scroll

A project index should feel like one long reel, not a grid. The stage repaints to each project colour as it lands, so it wants work with colour worth showing.

Gate the page behind one object

Liquid Glass Orb

A landing page should make the reader commit before it opens. The orb is the only thing on screen until it is swiped up, and it stays as a compact anchor afterwards, so the entry is a gesture rather than a splash screen.

Strips that loop forever

Infinite Marquee

A row of logos or short labels should travel with no visible seam. Runs on the GPU alone, so it stays cheap to leave on a long page.

Perspective Marquee

An image gallery should read as depth rather than a row. Tilted rows scroll opposite ways, which pulls far more attention than a flat strip.

Behind your content

Morphing Shape Background

A hero needs colour moving behind the copy. Blobs drift and melt without SVG morphing, so it stays smooth across a large surface.

Borrowed from macOS and iOS

These read as a quotation. Worth it when the reference is the point.

Dynamic Island Toast

Live status like a timer, a call, or an upload should stay on screen. The pill morphs and splits, and reads as iPhone on anything that is not one.

Genie Effect

Something dismissed should visibly go somewhere. A per-slice warp pulls a window or panel down into a dock, which only lands if that dock is real.

Cover Flow

An album picker that should feel like iTunes. Side cards swing into the center on click or arrow key, and a glass bar follows the track.

Apple Intelligence Glow

The screen itself should light up. A soft iridescent rim traces the edges the way Apple Intelligence does, and a pill turns it off.

Borrowed from Google

These read as a quotation. Worth it when the reference is the point.

Google Search

A homepage search should feel like Google AI Mode. The rainbow travels the rim while idle prompts type themselves in.

Switching between panels

Animated Tabs

Tabs should feel like shuffling a physical stack rather than swapping a div. Cards promote to the front with the image inset up top.