Skip to content

Holo Gloss Site

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.

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
More than 400 components

Custom props
Builders' first choice
Different styles
InstallCopy
7631
Glass
Kit
Aurora
Kit
Chrome
Kit
4090
2470
—— 10/26
Holo
Kit
4090 2470
7631
Glass
Kit
Aurora
Kit
Quick installs
MMayaIIlanTTheoNNoor
Keep scrolling

Let's learn more about viberdy

+400 components and counting.. 18 Design styles.

Scheduled drops →
Holo GlossLive now
Liquid ChromeIn the library
AttentionPhase three
UltraIn review
Next dropSoon
InstallCopy
7631
Glass
Kit
Aurora
Kit
Chrome
Kit
4090
2470
—— 10/26
Holo
Kit
4090 2470
7631
Glass
Kit
Aurora
Kit
Quick installs
MMayaIIlanTTheoNNoor
11:46 •••
Good morning,
Maya.
Total installs
12,544
Our
Pricing

Our Pricing

Pick your way in

One kit, or every kit.

Free

$0forever

Every free entry, to copy and ship.

  • Free entries in every style
  • Source to copy and paste
  • shadcn CLI installs
  • Live previews to try first
Browse the library
This kit

Holo Gloss kit

$39one-time

This whole site, cut into parts.

  • Every Holo Gloss entry
  • The full site and each section
  • An AI prompt for every part
  • Yours to keep
Get the kit

Pro

$79per year

Every kit in the library, new drops included.

  • All Pro entries, every style
  • Holo Gloss and every kit
  • Each new drop while you're Pro
  • Prompts, CLI and source
Go Pro

Prices in USD. Every kit is included in Pro.

3090
3090
Glass
Kit

Enteryour mail

One email per new drop. Nothing else, and one click to stop.

Ready when you are.

viberdy

Premium React components in every style, built to be pasted.

© 2026 viberdy. All rights reserved.Back to top ↑

Props

No runtime dependencies
"use client";

import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type FormEvent, 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 whole site

A whole product landing in the glossy, iridescent register (pale cool ground, near-black ink, Urbanist at 300 and 700, all the colour kept inside glass) where the scroll tells the story. The hero's cards land as a pile, open into a fan and are flown into while the headline lifts away. A dark room slides up over them; the app rises into it on a phone, the words come in, and the phone slides through its cards with the scroll while two fork sculptures point you on. The bento assembles, then its outer tiles trade height with the scroll, each crop showing more of the same picture: numbers count, phones scroll, frost clears. Then the word "Pricing", seen from inside its own letter, pulls back and slides away into three glass plan cards dealt out of a pile, with real links. The page ends with a sign-up that says what it is for, a last call with two buttons and a footer of real links. One nav floats over all of it, turns white over dark sections and goes to the plans. Every picture is painted by one shared WebGL2 ray marcher and cached, so there are no image files to host. All copy lives in one content prop.

Curator’s note

Written as one file in which each section is its own exported component carrying its own CSS; the kit's assets were cut from it by a generator that copies the statements each one references byte for byte. The hero, the room, the bento and the word mask each pin themselves and run on one eased progress value; every section reads the screen height of whatever scrolls the site, so it works on a page and inside a scrolling box.

Related

Pairs well with

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

Featured
NewPro

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.

hero3d cardsscroll 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
Pro

A pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.

pricingsectionplans