Puffer Quilt Field
A background of diamond-quilted puffer you can press: a pillow sinks under your finger while the four around it puff up with the stuffing it lost, then everything springs back, rendered live in WebGL2.
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.
Press a pillow.
Its neighbours take the stuffing
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* PufferQuiltField — a background of quilted puffer you can press.
*
* A diamond-stitched cushion surface, lit from the upper left. Hover a
* pillow and it gives a little; press and it sinks while the four pillows
* around it puff up with the volume it lost, then everything springs back
* inside half a second. WebGL2, drawn only while something moves. Content
* goes on top as children. Dough, gum, lilac and ink.
*
* Part of the Tactile Maximalism kit: dough #f7f0e4, warm ink #17130f and
* one loud accent, bubblegum #ff2d78, filled once per screen; grain fixed to
* the material; soft shadows tinted by what casts them, never a hard offset.
* Everything soft keeps its area as it squashes and settles inside 450ms.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
A surface you want to press. The ground is a diamond-quilted cushion, stitched along every seam and lit softly from the upper left. Hover a pillow and it gives a little under the pointer; press and it sinks while the four pillows around it puff up with the volume it lost, because the stuffing has to go somewhere; let go and every pillow springs back, one overshoot, inside half a second. It draws only while something moves and is perfectly still otherwise. Content goes on top as children: a signup card, a quote, a price.
Curator’s note
The Tactile Maximalism kit's signature surface (slot 2), cut from tactile-maximalism-site. Pro: a WebGL2 heightfield shader lit per pixel, driven by a per-pillow spring simulation that conserves volume.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Ink Fluid Field
backgroundsA real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
Liquid Wallpaper Field
backgroundsA slow WebGL wallpaper of folded silk layers on a seamless 60-second loop: vivid, calm, and sharp-edged enough for glass to bend.
Lit Dot Matrix Field
backgroundsA WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.