Scroll
Text portal
Zoom-through text: a giant word is cut out of the page and scrolling dives into one of its letters until the scene inside fills the screen — then the page carries on. The hero on the home page is one.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { TextPortal } from '@vizzele/react';
import { FluidBackground } from '@vizzele/react/gl';
<TextPortal text="VIZZELE" focus={1} cover={<p>Scroll to dive in</p>}>
<FluidBackground /> {/* the scene inside the word */}
<h1>Interfaces that feel liquid</h1>
</TextPortal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The giant word (decorative). |
children | ReactNode | — | The scene inside the word. |
cover | ReactNode | — | Shown over the word at the start, fades as the dive begins. |
focus | number | middle letter | Index of the letter to dive into — pick one whose centre is ink (I, H, M, N). |
length | number | 1.5 | Scroll distance of the dive, in viewport heights. |
smooth | boolean | true | Ease between wheel steps. |
onProgress | (p: number) => void | — | 0 outside the word, 1 inside. |
container | HTMLElement | Window | window | Scroll root. |
--vz-portal-bg / -depth / -font | CSS | — | Sheet colour, how far the scene zooms in, the word’s font. |
Accessibility
- The word is decorative (aria-hidden); name the section with a real heading inside the scene.
- Tabbing into the scene jumps straight inside, so keyboard users never land on hidden controls.
- Exposes --vz-portal-p (0..1) and data-state (closed · diving · open) to choreograph your own content.
- With reduced motion there is no dive: the scene is shown as a normal section.
- One SVG mask and a sticky stage — no canvas, no scroll hijacking; it only works while on screen.