Arch Portal Reveal
What it does
A sticky stage where an arch-shaped opening grows from a small doorway to the entire frame as you scroll, revealing the scene behind it. The scene never scales: it keeps its own viewport-sized box and is anchored to the same bottom-centre point as the opening, so it sits perfectly still while the aperture grows around it — scaling the container instead would balloon the type, lose the photograph's crop and read as a zoom rather than as walking through a door. The arch is `border-radius`, not `clip-path` (a real curve, no facets, two numbers to animate instead of a polygon whose vertex count must stay constant), and the radius is pulled down on a `pow(1-p, 1.9)` curve so the shape is unmistakably an arch during the first third, which is the part the reader watches. One ScrollTrigger writing directly on every update, no scrub; Lenis supplies the smoothing. Dressed as a glasshouse: Playfair Display + Kumbh Sans, moss green and chalk.
How it's built
| Category | transition |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Arch Portal Reveal — a doorway that grows until it is the whole frame
## Goal
Build a pinned stage where an **arch-shaped opening grows from a doorway to the full viewport** as
you scroll, revealing the scene behind it. The scene does not move, does not scale, does not
reframe: only the opening changes size.
Use it as a transition into a place — an interior, an exhibition, a chapter that is somewhere
*else*. The mechanic is literally walking through a door, so it pays for its height only when the
thing on the other side is worth arriving at.
## Tech
Vanilla HTML/CSS/JS with ES modules: `gsap` + `ScrollTrigger`, and `lenis`. No plugins beyond
ScrollTrigger.
```js
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.