← All components
Showcase / component
Browser Reveal
A product browser moves from dramatic perspective into a crisp, full-size presentation as you scroll.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- An original Chungus UI scroll composition with Magic UI’s MIT Safari frame. All source frame geometry, toolbar details and 1203:753 proportions are retained. The included FORM artwork is original HTML/CSS; no Apple website images are used.
- The complete component owns a 600px native scroll region. Focus it and use PageDown/PageUp or scroll directly. The perspective and scale scrub with progress. It does not capture wheel events, lock the document or require a smooth-scroll library.
- Pause freezes the current pose; resume synchronizes to the current native scroll position. Replay resets the local scroll region. Reduced motion shows the fully settled product without requiring scrolling. Work is scheduled only for scroll/resize, with cleanup and visibility suspension.
- Import BrowserReveal for the full experience or the named Safari export from the bundled file for a frame alone. Safari supports children, imageSrc, videoSrc, mode, url, tone, paused and div attributes. No Tailwind setup or external assets are required.
- At narrow widths the browser artwork intentionally extends beyond the sides of its stage to retain legibility; the surrounding page does not overflow. Custom long content must fit the device screen. Tilt is clamped to 0–45 degrees, scale to 0.5–1 and distance to 200–1800px.
React 19.2CSS container queriesResizeObserver
Magic UI · MIT; device frame geometry. See bundled magic-ui-device-LICENSE.txt.
Chungus UI · Project-authored composition, artwork and motion. Public distribution terms pending release decision.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | "A bigger canvas." | Headline |
subtitle | string | "A little perspective changes everything." | Subtitle |
tilt | number | 24 | Initial tilt |
startScale | number | 0.76 | Initial scale |
distance | number | 700 | Scroll distance |
theme | string | "dark" | Stage |
children | ReactNode | studio artwork | Custom product content inside the browser screen. Remains interactive. |
imageSrc | string | undefined | Optional screenshot URL. Custom children take precedence. |
url | string | form.studio | Display-only address in the browser illustration; no navigation is performed. |
paused | boolean | false | Pause decorative motion; functional controls remain available. |
replayToken | number | 0 | Change to reset the presentation. |
className | string | '' | Additional outer classes. |