Word Mask Section
Opens on a rendered concrete set with the app on two phones; on scroll the camera pulls out of the inside of the letter "i" and the whole set turns out to be inside a giant word, which then slides across the screen into the next section.
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.
Our Pricing
Props
"use client";
import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, 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
A transition you can only do with type. The section begins full-bleed on a still: a board-formed concrete ledge seen from above, a large dark phone lying across it showing a bar chart and a list of drops, a pale phone in the corner with a greeting and a number, and a white fork drawn over them like a ribbon. "Our Pricing" sits in the corner. Scroll, and the frame starts to shrink away from you: the camera was inside the stem of the letter "i" all along. The ground appears around the letters, the whole word resolves at more than a screen wide with the set still visible through it, and then it glides left as you keep scrolling, handing over to whatever it names (in the kit's site, the plans). It pins itself inside a tall wrapper and is driven by scroll progress, or it plays on a loop, or it holds any moment you pass in. Any word works; pick one whose anchor letter has a thick stem.
Curator’s note
The plate is built once: the kit's concrete scene from the ray marcher, then two phones painted on it with Canvas 2D at a diagonal, then saved as an object URL. The word is an SVG clipPath, which works in every browser and uses the page's font, and its transform (scale about the anchor letter, then the slide) is written straight to the DOM each frame.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Phone Room Section
sectionsA 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.
Holo Cascade Hero
heroesA 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.
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.