Jelly Letter Hero
A first screen whose oversized headline is made of soft bodies: move through the letters and they dent, press one and it squashes with its area kept, drag it and it stretches after you, let go and it wobbles home.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Drop loud.
Records, merch, tickets and memberships, sold from one page that feels as good as the thing you made.
- Vinyl
- Merch
- Tickets
- Members
5% per sale · no monthly fee
Props
"use client";
import { Fragment, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* JellyLetterHero — a first screen whose oversized headline is made of soft bodies you can squash.
*
* Every letter is a soft body cut from the real type: move through the
* letters and the pointer dents them; press one and it squashes onto its
* baseline with its area kept; drag it and it stretches after you; let go
* and it wobbles home to its exact rest shape. One line sits on a
* bubblegum chip that squashes as one gummy slab, and the tags below are
* soft too. Simulated live, drawn in WebGL2 with grain fixed to the
* material, asleep when still. Without WebGL2 or with reduced motion the
* headline is plain type; screen readers always get plain text.
*
* Part of the Tactile Maximalism kit: dough #f7f0e4, warm ink #17130f and
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The first screen of a creator platform, where the headline is the thing you touch. Every letter is a soft body cut from the page's own type: move the pointer through the letters and they dent where it passes; press one and it squashes onto its baseline, growing as wide as it grows short; drag it and it stretches after you like taffy; let go and it wobbles home to its exact rest shape inside half a second. One line sits on a bubblegum chip that squashes as one gummy slab with its word printed on it, and the tags below are soft too. The jelly is simulated live and drawn in WebGL2 with a grain that belongs to the material, and it sleeps when nothing moves. Without WebGL2, or with reduced motion, it is plain, crisp type.
Curator’s note
The Tactile Maximalism kit's hero (slot 1, Featured), cut from tactile-maximalism-site. Pro: a soft-body simulation (lattice shape matching with area-keeping squash) of the real headline type, drawn in WebGL2 as textured, strain-shaded triangles.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Gummy Pile Footer
sectionsA dark footer whose huge wordmark is a pile of gummy letters with weight: grab one and throw it, and it tumbles, bounces off the walls and the other letters, squashes where it lands and settles into a pile.
Whiplash Letters
text effectsA headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
Headline Switch Hero
heroesThe second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.