Skip to content

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.

Preview

Press a pillow.

Its neighbours take the stuffing

Props

88
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Trending
Pro

Ink Fluid Field

backgrounds

A 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.

backgroundwebglfluid
Trending
Pro

A slow WebGL wallpaper of folded silk layers on a seamless 60-second loop: vivid, calm, and sharp-edged enough for glass to bend.

backgroundwebglshader
Pro

A 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.

backgroundwebglshader