Morph Bento Grid
A 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.
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.
+400 components and counting.. 18 Design styles.
Maya.
Props
"use client";
import { useCallback, useEffect, useId, 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 section
A feature grid that tells you more the further you scroll. Three columns: on the left a cobalt glass tile with the headline number above a dark tile of upcoming drops on an angled phone; in the centre a pill of holo ribbon, the app phone and a pill of pale cobalt glass; on the right a grey tile with a pale phone close-up and the styles number above a frosted tile with coloured rings behind the glass. As the section slides up the tiles assemble out of a blur, the app first and the others around it in turn. Then the section pins and every tile opens up: the numbers count up to their values and the second line arrives, the glass inside the cobalt tile drifts upward, the drops phone scrolls its list along its own tilt, the app's phone pans to show its foot while its carousel slides through the cards, the foil in the two pills sweeps in opposite directions, the greeting phone swings round to face you, and the frost over the 3D tile clears until the rings are sharp. Use mode="auto" to play the run on a loop.
Curator’s note
The grid's geometry never changes, so nothing reflows: every reveal is a transform on an oversized layer inside its tile, or an opacity, written straight to the DOM from one progress value. Tiles are found by data attributes, so the copy, the order and even the centre tile can change without touching the choreography.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Keynote Bento Hero
heroesA launch hero set like a keynote recap slide: one huge figure in a 2x2 tile, and a bento grid that assembles around it as the numbers count up.
Bento Preview Hero
heroesCopy beside an asymmetric bento grid of small feature-glimpse tiles.
Metric Proof Tiles
sectionsA proof section set as bento tiles: 1x1 figures that count up once as they arrive, one accent tile that breaks the row, a quote, and a live figure that ticks slowly.