A cinematic library of frontend experiments.

15 showcases curated across motion, scroll, reveal, and creative web work. Press ⌘K to search anything.

Featured10

Acronym Intro Hero

A landscape practice's homepage: an acronym intro opens into the hero through a chamfered frame, then sector cards slide over it and unfold as you scroll.

PreloaderHorizontal ScrollSticky

Footer

ASCII Reach Footer

A studio footer revealed from beneath the page: two arms drawn in glyphs slide in, reach for each other and light up in clusters wherever the cursor passes.

CanvasASCIIScroll Reveal

Footer

Vessel Parallax Footer

A ceramics studio's footer uncovered with parallax, as a procedurally thrown, glazed vessel rises from the dark — drag to turn it, tap to morph between pieces.

Three.jsParallaxProcedural 3D

All showcases15

Hero

Acronym Intro Hero

A landscape practice's homepage: an acronym intro opens into the hero through a chamfered frame, then sector cards slide over it and unfold as you scroll.

PreloaderHorizontal ScrollSticky

Footer

ASCII Reach Footer

A studio footer revealed from beneath the page: two arms drawn in glyphs slide in, reach for each other and light up in clusters wherever the cursor passes.

CanvasASCIIScroll Reveal

Footer

Glyph Collapse Footer

A type foundry's wordmark set in thousands of glyphs — they shy from the cursor, scatter, tumble into a heap on the floor and rebuild in a wave.

CanvasPhysicsASCII

Footer

Vessel Parallax Footer

A ceramics studio's footer uncovered with parallax, as a procedurally thrown, glazed vessel rises from the dark — drag to turn it, tap to morph between pieces.

Three.jsParallaxProcedural 3D

Cursor

ASCII Glyph Field

A word built from thousands of scrambling glyphs that scatter from your cursor, heat up as they move, and morph on every click.

CanvasPhysicsASCII

Cursor

Ink Fluid Cursor

A GPU fluid simulation that pours ink from the cursor and inverts the editorial page beneath it.

WebGLThree.jsFluid Sim

Cursor

Guiding Light

A procedural flame follows your cursor through a dark forest, revealing only what its light touches.

CanvasParticlesCSS Mask

Cursor

Magnetic Marquee

An image strip that follows the cursor, steers with your sideways motion and shoulders the copy out of its way.

MarqueePhysicsBlend Mode

Scroll

Untouchable Contact

An endless contact list that parts around a chrome object as you scroll — and an object that dodges every attempt to touch it.

Infinite ScrollPhysicsCursor

Cards

Magnetic Cards

A photo zine's four prints held in a stack — push them with your cursor and they spring back, dragging their neighbours along.

GSAPPhysicsCursor

Testimonials

Testimonials Marquee

Guest notes for a coastal hotel in three columns drifting at different speeds — hover eases a column to rest.

Framer MotionMarqueeCards

Reveal

Scroll Reveal Grid

An architecture portfolio whose projects wipe into view with settling zoom and parallax as you scroll.

IntersectionObserverClip PathParallax

Loader

Morph Loader

A photographer's intro: a morphing shape flip-books portraits while loading, then blooms into the full-screen hero.

SVGPath MorphClip Path

Marquee

Infinite Marquee

A film studio's reel in three seamless rows — hover eases a row to rest, scroll speeds it up, drag scrubs with inertia.

Vanilla JSLoopDrag

Hero

Liquid Reveal Hero

A fashion lookbook hero where photography pours in through a liquid displacement field, with a word-by-word headline reveal.

SVG FilterDisplacementReveal