Sticker Peel Steps
How it works as three stickers you peel: pull from a corner and each one curls back around a real fold with its paper liner showing, a shadow growing under the flap; past halfway it comes off and reveals the picture underneath.
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.
How it works
Three steps. Peel to see.
Upload the thing
Tracks, a cover, a size chart. Whatever you made goes in as it is.
Set a price
A price, a floor for pay-what-you-want, a limit on how many.
Drop it
One link for your fans. It sells, ships and pays out.
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* StickerPeelSteps — how it works, as three stickers you peel off.
*
* Each step's text is always readable; its picture is covered by a sticker
* with a corner already lifting. Pull from a corner and it peels around a
* real curl, its paper liner on the back and a shadow under the lifted
* flap; past halfway it comes off and falls away, short of that it springs
* back flat. A Peel button does it from the keyboard. WebGL2, with a flat
* fallback.
*
* 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.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A how-it-works section with a reason to touch it. Each step's text is always there to read; its picture is covered by a sticker whose lower corner is already lifting. Grab near a corner and pull: the sticker peels back around a real curl that travels with the fold, its paper liner showing on the underside, a shadow under the lifted flap that grows with the lift, and the face darkening where it bends away from the light. Let go past halfway and it comes off, runs past the far corner and drops away, revealing a small picture of that step; short of that it springs back flat. The Peel button does the same from the keyboard, and "Stick them back" resets them.
Curator’s note
The Tactile Maximalism kit's feature section (slot 7), cut from tactile-maximalism-site. Pro: a WebGL2 page-curl mesh (a cylinder fold in the vertex shader, front, liner and cast shadow) driven by the pointer, over a three-part section.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Vertical Timeline Reveal
sectionsA scroll-triggered vertical timeline whose dots and cards reveal in sequence.
Aurora Window Features
sectionsFeature cards as windows onto one sky: a single WebGL canvas draws the aurora only inside each card's window, so a curtain carries on from one window to the next.
Exploded View Section
sectionsThe product taken apart live in WebGL2: its parts separate on a spring and each carries a callout pinned to it by a leader line re-projected from the 3D scene every frame, so labels stay on their part as it turns.