Phone Room Section
A rendered dark room slides up over the page and the app's phone rises into it; held on screen, the words come in one by one and the phone's card carousel and row of people slide along with the scroll. Two grey fork sculptures are the scroll cue: light runs down them, they bob, and a click moves the page on.
This is a viberdy Pro component · launch price
The live preview and props panel are open to everyone. Pro unlocks the full source, the AI prompt and CLI install for this and every other Pro entry: from $6/month, kept while you stay subscribed, or Lifetime $161 once. Launch prices end 31 Oct.
Let's learn more about viberdy
Props
"use client";
import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, type ReactNode, type RefObject } from "react";
/* ============================================================================
* HOLO ART ENGINE
*
* Every picture in the kit (the glass cube grid on a card, the violet tubes,
* the mosaic, the cobalt slabs, the dark tiled room, the concrete steps) is
* PAINTED IN CODE by one hand-written WebGL2 ray marcher. Nothing is a photo
* or a video, so an AI agent can retarget a scene by editing its map().
*
* How it stays cheap:
* - One shared offscreen WebGL2 context for the whole page, created on the
* first request and never per component.
* - A picture is rendered ONCE per (scene, size, seed) and cached as a
* canvas. Cards, pills and tiles draw the cached canvas into their own 2D
* canvas; nothing ray-marches per frame.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
The section that introduces the product after the hero, played by the scroll. A ray-marched room (a wall of soft square tiles, a stone floor, a plinth, a pool of overhead light) slides up over the page, and as it does the app rises into the middle of it on a near-black phone whose top is cut by the section edge. The section then pins. The words either side come in one at a time out of a blur, three on the left and two on the right with an asterisk over them, and the phone's screen starts to move with you: its carousel of holo kit cards slides continuously from the first card to the last, and the row of people under Quick installs drifts the other way, running into a fade at the screen's edge rather than a cut. In the foreground two grey forks stand like arrows pointing down. A glint of light runs down each stem and splits into both arms, the forks bob out of step, a small "Keep scrolling" label sits between them, and clicking either one scrolls the page on. As the run ends the forks sink away. Use mode="auto" for a loop.
Curator’s note
Progress runs from the room's top edge entering the view to the end of its pinned run, so the phone is already rising while the room slides up; the carousel and the chip row are moved by one exported helper (hgPhoneScroll) that any section can call. The room is a single still from the kit's dark ray marcher rendered once at the section's size.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Morph Bento Grid
sectionsA three-column bento of glass, frost and phone tiles that opens up with the scroll: the tiles assemble as it slides in, then the outer columns trade height in two diagonal beats. Each picture is pinned to its column's edge at full size, so a tile opening reveals more of it rather than stretching it, and the labels ride the moving edge. Numbers count up, phones scroll their screens, the app's carousel slides, foil sweeps through the pills and the frost over the 3D tile clears.
Holo Plan Cards
sectionsThree glass plan cards with holo faces, dealt out of a pile into a row as the section scrolls into view, the featured one ringed in cobalt and lifted. Each card is a real offer: price, cadence, four lines and one link.
Circuit Feature Map
sectionsFeatures as nodes on a hairline circuit around a core chip: traces draw in on scroll, pulses run out of the core to each node, and hovering a node lights its trace, its pin and the core.