Skip to content

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.

ProHolo Glossglassminimal

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.

Unlock Pro · from $6/mo
Already Pro? Sign in
Preview
7631
Glass
Kit
Aurora
Kit
Chrome
Kit
4090
2470
—— 10/26
Holo
Kit
4090 2470
•••• 2470
viberdy
More than 400 components

Custom props
Builders' first choice
Different styles

Props

0
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

Holo Gloss Site

site templates

The 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.

landing pagewebsite templatescroll animation
NewPro

Three 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.

pricingplanspricing cards
Featured
Pro

A 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.

herowebglshader