Holo Cascade Hero
A scroll-driven hero in three acts: five iridescent glass cards fly in and land as a neat pile, scrolling opens the pile into a flip-book fan that leans back in real 3D, and scrolling on flies the camera into the fan while the headline lifts away. Every picture on the cards is ray-marched glass, painted in code.
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.
Props
"use client";
import { useCallback, useEffect, useMemo, 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 heroe
The opening of a glossy product landing, told by the scroll. On load five cards fly in from beyond the top-right corner with their own motion blur and land, back card first, as a neat pile, while an asterisk types the headline and parks after its last word. The hero then pins itself. Scroll, and the pile opens: each card slides out along its own path into a flip-book fan, the front one turned a third of a turn, each one behind it flatter, further back and lower, the deck tilted away from you in real CSS 3D. Scroll on, and the camera pushes into the fan: the fan opens wider and deeper around its middle card, every card turns its face up toward you, and the headline lifts away in a blur. The pictures on the cards (glass cubes with a chrome ball, a foil wave, chrome rings, a holo ribbon, cobalt panes) are not images: a ray marcher paints them once at each card's real pixel size. The deck also turns a few degrees toward the pointer, and the fork at the bottom left is a scroll cue you can click. Use mode="auto" to play the three acts on a loop instead of the scroll.
Curator’s note
The cards are DOM in a preserve-3d deck, so their labels stay real text; only the pictures on them come from the engine. Each card has three poses (pile, fan, fly-in) and the deck's camera has three matching settings; one number from 0 to 1 blends between them and is written straight to the DOM each frame, eased toward the scroll so a flicked wheel glides. One shared WebGL2 context ray-marches each scene once and hands the cards a cached canvas, so the whole sequence moves at compositor cost.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Holo Gloss Site
site templatesThe complete Holo Gloss landing, told by the scroll: cards that open from a pile into a fan and are flown into, a dark room where the app slides through its cards, a bento whose tiles trade height, a word that pulls out of its own letter into the plans, a sign-up and a real footer. Branded viberdy; every word is a prop.
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.
Liquid Lens Hero
heroesA slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.