Section Library

Aperture Reveal

  • GSAP + ScrollTrigger
  • Scroll-pinned
  • Static on mobile
Live preview
Full screen ↗
Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]
Step 2 — the prompt · Aperture Reveal428 lines · 15,553 chars
You are given a task to integrate an existing React component in the codebase.

The codebase should support:
- Next.js (App Router or Pages)
- Tailwind CSS
- TypeScript

If it doesn't, provide instructions on how to install Tailwind or TypeScript.

What it is

A full-screen moment where one signature image opens up from a thin slit to fill the screen — like a camera aperture opening — while giant ghost words drift behind it. The section pins in place while the visitor's scroll drives the reveal.

Perfect for

Showing off ONE hero image that deserves the spotlight. Real estate, architecture, restaurants, hotels, fashion, product launches. Place it right after your hero section as the “second wow.”

What to prepare

  • One stunning landscape-format image (this section lives or dies on image quality — use your best shot or generate one with AI)
  • A short “eyebrow” label (e.g. “The Collection”)
  • One big ghost word (e.g. “RESIDENCES”) and a small echo word (e.g. “· cyprus ·”)
  • A two-line caption

Good to know

On mobile this section is intentionally static (no animation) — that's by design, scroll-pinning on phones causes jank. Also: it uses GSAP and works beautifully with the Lenis smooth scroll from the hero lesson — the prompt already includes the wiring instructions.