Holo Ribbon Capture
An email sign-up where two capsules of holo glass slide in from opposite edges, two cards drop from above and hang there swaying, and the form sits under the long ribbon with an asterisk that turns as you type, a Submit pill that darkens once there is something to send, and a line saying what the address is for.
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.
Enteryour mail
One email per new drop. Nothing else, and one click to stop.
Props
"use client";
import { useEffect, useId, useRef, useState, type CSSProperties, type FormEvent, 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 last screen of the landing, where the ask happens. "Enter your mail" rises on the left in a light and a bold line. A long capsule of twisted holo glass slides in from the right edge to sit beside it, and a shorter capsule of cobalt and coral rings slides in from the left below it, so the two bands cross the page in opposite directions. Two cards drop from the top of the section, overshoot a little and hang there, swaying on slow pendulum loops. The form sits to the right under the long ribbon: a pill field, an asterisk that turns a step with every keystroke and spins while a request is in flight, and a black Submit pill. Wire onSubmit to your list provider; its promise decides whether the button reads Added or the status explains what went wrong.
Curator’s note
The form is real: a labelled email input, linear-time validation, an aria-live status and an async onSubmit whose promise drives sending, done and error. Without onSubmit it never pretends: it says nothing was sent.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass Tint Footer
sectionsA liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet gliding between links and frost re-tinted to that section.
Chrome Rim Input
patternsAn email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and success pours the pill into a round chrome drop with a check.
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.