Lerp

Pipe

Visitpipe.com

Free previewPro opens every clip, exact specs and prompts.

Get Pro →
Intro · 1440 px · 7 s · 30 fps
Step frames · Pro

Full page · Pro

ScrollTriggerSplitText 30 fps
Specs

The motion

Pipe is known for ScrollTrigger intro. Measured from frames; estimates from notes. Each fit includes its error.

02 · Scroll

Estimate

The page scrolls inside an inner container (window scroll stays 0)

Curve Duration Scroll
Prompt

Prompt pack

The design presents a stark, high-contrast aesthetic defined by deep black backgrounds and grainy, film-style photography. It balances technical precision with human warmth through the use of vibrant orange accents against charcoal surfaces. The interface feels cinematic and deliberate, utilising smooth motion to reveal content in a split-screen composition that merges bold typography with immersive imagery.

5 prompts in Pro Generated 25 Sep 2026

  • Recreate this site's feelEverything: look, layout, type, colour, motion and libraries, in one prompt.
  • Just the scroll feelSmoothing, what moves with scroll, pinned sections.
  • Just the introHow the page enters: sequence, curve, duration, stagger.
  • Just the hoversLinks, buttons and cursor: timings from the live CSS.
  • Just the type and colourFamilies, scale, weights, tracking and the palette with roles.

Pro opens every prompt with its measured values, and the tokens they are built from.

Unlock prompts with Pro

US$60/year or US$8/month. Cancel anytime.

Record

Capture record

Savedon 24 Sep 2026. Full pages, stills and key frames.

Pro opens the rest of the record: the whole page at each viewport, the key frames of every clip. See Pro

Captured

  1. 24 Sep 2026 home · 1440 px · home · 390 px · key pages · 1440 px · key pages · 390 px
Notes

Pipe (pipe.com): ScrollTrigger intro.

dark · 4 effects · 30 fps clips

Motion
Intro, Scroll, Hover, Page transition
Libraries
ScrollTrigger, SplitText, Framer, Next.js
Footage
1 clip, frame-stepped 30 fps
Captured
24 Sep 2026

pure black. A split hero: a two-line white headline whose first words are orange, and a large grainy, film-like photo of a woman on a phone filling the right half. An orange-lit dot-matrix world map and a white-bordered "Capital Offer $30,000" product card follow.

Libraries detected

Stack as observed

Next.js (Pages router) with Chakra UI (dark mode) and Emotion classes; motion: bundle contains GSAP, ScrollTrigger and SplitText (not global; the hero h1 is split into word spans, so SplitText is probably live), Framer-Motion-style WAAPI fades, CSS keyframes (optimizedMapScroll, 25 s linear); one 2D canvas in the testimonial section; two YouTube embeds; no WebGL.

Techniques

Techniques on this site

Each one taught on its own page: a live demo you can tune, how it works, and the code. Split-text mask reveal, Grain and noise overlay.

More like this

Similar motion and feel.

91 % alike
88 % alike
88 % alike
88 % alike
86 % alike
86 % alike