Collections / Interactive

Back to Collections
INT // 08
Tactile Workbench 151 Live · 151 Specimens Svelte 5 Runes

Interactive
Components.

A curated bench of micro-interactions, physical springs, and tactile UI primitives. Every specimen is live on the canvas — press, drag, scrub, or type directly inside each stage.

01

Dynamic Island

Press
LIVE
02:22

A live activity capsule that morphs between compact status, telemetry flight tracker, and audio deck.

Click pill or mode tabs
02

Wake Slider

Drag
Frequency Gain
64 %
00 dB GAUSSIAN WAKE σ=2.5 100 dB

Forty precision bars with no thumb; scrub across and neighboring bars rise in a Gaussian velocity wake.

Drag or scrub across bars
03

Card Swap

Swipe
SPECIMEN // 01 0.42 ms
Spatial Kernel
Zero-allocation layout pass
SPECIMEN // 02 120 fps
Kinetic Shader
Simplex displacement field
SPECIMEN // 03 ζ = 0.72
Haptic Spring
Under-damped harmonic solver

Three spatial cards stacked in Z-depth. Fling or press the front card to cycle it to the back with spring step-up.

Click card or toggle Auto
04

Magnifying Dock

Hover
Active Module: layers

macOS-grade proximity magnification dock. Cursor distance modulates icon scale and vertical lift in real time.

Sweep cursor across dock
05

Magnetic Dots

Hover

An 11×5 field of kinetic nodes that orient and displace radially around your cursor with elastic return.

Hover or tap matrix field
06

Slide to Confirm

Drag
Slide to Deploy · 0%

High-stakes settlement actuator. Drag past 86% to lock and execute, or release early for instant elastic snapback.

Drag handle to right edge
07

One-Time Code

Type
ENTER 6-DIGIT HARDWARE CODE

Six-digit hardware token input with kinetic focus ring, auto-advance, backspace traversal, and verification pulse.

Type digits or click Fill
08

Toast Stack

Swipe
Edge Deployment Ready
iad1 · 18ms cold start
Just now
Shader Cache Compiled
42 pipeline variants
14s ago
Vector Index Synced
12,480 embeddings
1m ago

Layered notification cards that compress into a tight Z-stack at rest and fan out into a readable list on hover.

Hover stack or push event
09

Press Burst

Press

Every press detonates a concentric shockwave ring that expands past the capsule boundary.

Press the actuator
10

Segmented Tabs

Press

Four-mode segmented control where the active pill glides between slots on one cubic-bezier track.

Press a segment
11

Liquid Toggle

Press
Disabled

A capsule switch whose knob stretches and settles into position with icon crossfade.

Press the switch
12

Drag Stepper

Press
48
Bounded 0–99

Increment and decrement a bounded register — the digit re-mounts with a fly transition on each step.

Press − or +
13

Checklist

Press
Pipeline33%

Three operational checks driving a shared progress rail — complete all to pulse the summary.

Toggle each row
14

Pay Button

Press

Idle → processing spinner → success morph, the full payment lifecycle compressed into one actuator.

Press to settle
15

Inline Confirm

Press
Requires two taps

Destructive intent requires an explicit second press inside the same footprint — no modal needed.

Press twice to confirm
16

FAQ Accordion

Press

WebGL2 fragment pass, float32 precision

Under-damped spring, ζ = 0.72

Sub-frame pointer sampling at 120Hz

Spec rows split open on hairline dividers — one open at a time, chevron rotates into position.

Press a row
17

Copy Field

Press
Press to copy

A mono credential field that swaps copy → check for 1.6s on successful clipboard write.

Press the field
18

Like Burst

Press

The heart press emits eight calibrated particles on radial vectors, then refills.

Press the heart
19

Notify

Press

Dispatch a status toast that flies in from the stage edge, lingers, then self-dismisses.

Press dispatch
20

Confetti Pop

Press

Fourteen calibrated squares eject on randomized vectors and spin through their decay arc.

Press celebrate
21

Tilt Card

Hover

A specimen card that pitches and rolls toward the cursor while its glare layer tracks the light.

Move across the card
22

Spotlight

Hover

A radial lumens field pinned to the cursor — the card reveals its edges under inspection.

Sweep the card
23

Edge Light

Hover

A conic rim light that orbits the bezel, following the cursor angle around the perimeter.

Trace the edge
24

Peek Rating

Hover
Solid

Stars fill on cursor position, commit on press, and report their verdict in mono below.

Hover stars, press to rate
25

Avatar Group

Hover

Five compressed identities fan into a readable roster while the lead avatar surfaces forward.

Hover the stack
26

Scramble Text

Hover
Hover to re-cipher

Glyphs cycle through the charset then resolve left-to-right into the target string.

Hover the word
27

Eye Tracker

Hover

Twin pupils track your cursor angle inside their sockets — unsettling, precise, alive.

Move around the eyes
28

Card Fan

Hover

Three clipped cards spread into a fan on hover, edges rotating around a shared bottom pivot.

Hover the deck
29

Image Accordion

Hover

Four tonal panels compete for width — the hovered panel claims the stage while others compress.

Sweep across panels
30

Heat Grid

Hover

A 8×4 sensor grid where cells warm proportionally to their Manhattan distance from your cursor cell.

Trace the grid
31

Pointer Trail

Hover

The last twelve pointer positions render as a fading comet tail — motion history made visible.

Move fast across
32

Foggy Word

Hover

A specimen word sits behind a 8px blur that resolves to razor clarity under your cursor.

Hover the fog
33

Network Nodes

Hover

Six meshed nodes brighten links near the cursor — topology responding to presence.

Move through the mesh
34

Split View

Drag
A · 50%
B · 50%

Two research panes share an adjustable seam — drag the hairline to redistribute the layout.

Drag the seam
35

Range

Drag
Intensity62%

A minimal fill track with a solid thumb — no browser chrome, full pointer capture.

Drag the thumb
36

Option Wheel

Drag
Lo-FiStandardDenseUltra
Selected: Standard

Flick through density presets — release snaps the strip to the nearest option with tactile lock.

Flick the wheel
37

Rolling Counter

Drag
420
Drag vertically

Drag vertically to roll the register — velocity maps directly to the odometer value.

Drag up or down
38

Picker Wheel

Drag
Mono
Serif
Grotesk
Slab
Round
Pixel

A masked vertical reel that drags freely then detents into the centered selection.

Drag the reel
39

Image Compare

Drag
BEFORE
AFTER

Two tonal renders separated by a wiper blade — drag to reveal the delta between states.

Drag the blade
40

Signature Pad

Drag
Ink capture · 2px

A raw canvas ink pad — pointer pressure curves recorded as 2D strokes, clearable.

Draw a signature
41

Pull Refresh

Drag

Pull the stage past its rubber band threshold to arm the refresh state, release to fire.

Pull downward
42

Glass Bubble

Drag

A floating bubble you can throw anywhere — release and it glides back to rest position.

Throw the bubble
43

Command Bar

Type
⌘K
Deploy edge build
Warm shader cache
Rotate access keys
Purge CDN layer

A command palette that filters live against typed input — top match highlighted.

Type a command
44

Search Filter

Type
8
Aesthetic Series
Orbit Field
Paint Mixer
Anatomy

Type to narrow a specimen index — match count surfaces as you narrow the corpus.

Type a name
45

Float Label

Type
Access Token

The placeholder label levitates into the bezel on focus or when the field carries a value.

Focus and type
46

Password Strength

Type
Empty

Four-segment entropy gauge scoring length, case, digits and symbols in real time.

Type a passphrase
47

Tag Editor

Type
motion webgl

Type a tag, press Enter to commit it as a removable chip — backlog taxonomy at speed.

Type + Enter
48

Swipe Deck

Swipe
DECK 1/5 Kernel Trace
DECK 2/5 Shader Pass
DECK 3/5 Spring Field

Fling the top card left or right — it exits on that vector while the next card steps forward.

Fling the card
49

Snap Carousel

Swipe
01 LATTIKE
02 FIELD
03 KERNEL
04 MESH

A strip of four frames that drags freely and detents to the nearest frame on release.

Drag or use dots
50

Reorder List

Swipe
01 Provision
02 Compile
03 Deploy
04 Verify

Drag a row through the stack — siblings translate out of the way, commit on release.

Drag a row
51

Wave Loader

Loop

Nine bars oscillating on a phase-offset sine — a loading state that breathes.

Ambient — no input
52

Bounce Loader

Loop

Three dots cascading on a staggered bounce — the classic, tuned.

Ambient — no input
53

Trace Loader

Loop
Tracing

A stroke tracing the bezel perimeter on an infinite dash-offset loop.

Ambient — no input
54

Pixel Loader

Loop

A 5×5 pixel matrix illuminating in scan order — deterministic, hypnotic.

Ambient — no input
55

Orbit Loader

Loop

A satellite dot locked to a circular path — perpetual orbital motion.

Ambient — no input
56

Morph Loader

Loop

A single shape cycling through organic radii — square to blob and back.

Ambient — no input
57

Shimmer Text

Loop
Loading

A specular highlight sweeping across display type — background-clip:text doing the work.

Ambient — no input
58

Profile Card

Hover Soon

Hover Popover

Hover Popover
59

Resizable Panels

Drag Soon
Editor · 55%
Preview

Tri-Pane Split

Tri-Pane Split
60

Tree View

Press Soon
runes.svelte.ts
signals.svelte.ts
spring.svelte.ts
tween.svelte.ts
canvas.svelte.ts
webgl.svelte.ts

Nested Disclosure

Nested Disclosure
61

Fold Dropdown

Press Soon

Origami Menu

Origami Menu
62

Album Shelf

Hover Soon

Tilted Vinyl Row

Tilted Vinyl Row
63

Piano Keys

Press Soon
Hold a key · Web Audio

Web Audio Octave

Web Audio Octave
64

Hub Diagram

Hover Soon
CORE

Spoke Highlight

Spoke Highlight
65

Billing Card

Press Soon
Pro Plan
$24/mo

Tier Morph

Tier Morph
66

Pill Accordion

Press Soon

Capsule Expansion

Capsule Expansion
67

Resize Frame

Drag Soon
220×110

Corner Handle Box

Corner Handle Box
68

Progressive Blur

Hover Soon

Row-Depth Defocus

Row-Depth Defocus
69

Feedback Bar

Press Soon

Sentiment Strip

Sentiment Strip
70

Folder

Hover Soon

Document Peek

Document Peek
71

Coin

Drag Soon
$
Flick upward

Momentum Toss

Momentum Toss
72

Text Fade

Press Soon
Press to toggle

Word Dissolve

Word Dissolve
73

Text Rise

Press Soon

Baseline Lift

Baseline Lift
74

Metaballs

Hover Soon

Blur-Contrast Fusion

Blur-Contrast Fusion
75

ASCII Wake

Hover Soon

Glyph Ripple Field

Glyph Ripple Field
76

Smudge

Hover Soon

Pressure Smear Trail

Pressure Smear Trail
77

Dot Globe

Drag Soon

Rotational Sphere

Rotational Sphere
78

Escape Button

Hover Soon

Cursor Evasion

Cursor Evasion
79

Thinking

Press Soon

Reasoning Pulse

Reasoning Pulse
80

Sweep Button

Hover Soon
Hover for specular pass

Specular Pass

Specular Pass
81

Asset Swap

Press Soon

Crossfade Exchange

Crossfade Exchange
82

Ticket

Drag Soon
ENTRY PASS
ROW A · SEAT 12

Stub Tear Gesture

Stub Tear Gesture
83

Segment Timer

Drag Soon
40mFocus

Arc Progress Drag

Arc Progress Drag
84

Generate

Loop Soon
Synthesizing…

Synthesis Placeholder

Synthesis Placeholder
85

Sound Pad

Press Soon

Tone Grid

Tone Grid
86

Voice Note

Press Soon
Hold

Hold-to-Record

Hold-to-Record
87

Now Playing

Press Soon
Night Drive FM

Transport Card

Transport Card
88

Heat Word

Hover Soon

Letter Ignition

Letter Ignition
89

Humidity Dial

Drag Soon
62% Humidity

Rotary Range

Rotary Range
90

Sleep Dial

Drag Soon
10:00

Night Arc Selector

Night Arc Selector
91

Roster Select

Press Soon

Assignee Cascade

Assignee Cascade
92

Canvas Toolbar

Press Soon

Tool Slot Select

Tool Slot Select
93

Liq Toggle

Press Soon
Rigid

Fluid State Morph

Fluid State Morph
94

Magnet Select

Hover Soon

Cursor-Snap Options

Cursor-Snap Options
95

Chrono Reel

Loop Soon
00:0000:1500:3000:4501:0001:1500:0000:1500:3000:4501:0001:15

Timeline Ribbon

Timeline Ribbon
96

Line Sphere

Hover Soon

Wireframe Rotation

Wireframe Rotation
97

Page Peel

Drag Soon
Page 01

Corner Lift

Corner Lift
98

Text Blur

Press Soon

Depth Resolve

Depth Resolve
99

Price Flow

Press Soon

Ticker Transition

Ticker Transition
100

Chain Reaction

Drag Soon

Lag-Follow Rope

Lag-Follow Rope
101

Parallax Layers

Hover Soon

Depth Field Shift

Depth Field Shift
102

Text Scatter

Hover Soon

Glyph Repulsion

Glyph Repulsion
103

Point Ripple

Press Soon
Press anywhere

Impact Wavefront

Impact Wavefront
104

Tile Cascade

Hover Soon

Proximity Rotation

Proximity Rotation
105

Magnet Orb

Hover Soon

Attraction Spring

Attraction Spring
106

Dot Ripple

Hover Soon

Proximity Scale Field

Proximity Scale Field
107

Wave Grid

Hover Soon

Dense Ripple Matrix

Dense Ripple Matrix
108

Cell Signal

Hover Soon

Sparse Signal Field

Sparse Signal Field
109

Drift Swarm

Hover Soon

Gravitation Cloud

Gravitation Cloud
110

Cursor Flock

Hover Soon

Dense Attractor

Dense Attractor
111

Stair Bounce

Press Soon
Press to cascade

Cascading Keys

Cascading Keys
112

Key Stair

Press Soon
Press to cascade

Wide Cascade Row

Wide Cascade Row
113

Pulse Matrix

Loop Soon

Phased Cell Field

Phased Cell Field
114

Blink Panel

Loop Soon

Dense Phase Panel

Dense Phase Panel
115

Radar Cells

Loop Soon

Sweep Phase Grid

Sweep Phase Grid
116

Gyro Rings

Loop Soon

Tri-Orbit Gimbal

Tri-Orbit Gimbal
117

Orbit Pair

Loop Soon

Dual Satellite Spin

Dual Satellite Spin
118

Halo Spin

Loop Soon

Quad Halo Wheel

Quad Halo Wheel
119

EQ Bars

Loop Soon

Wide Audio Field

Wide Audio Field
120

Sine Rack

Loop Soon

Tall Phase Stack

Tall Phase Stack
121

Breath Bars

Loop Soon

Slow Respiration

Slow Respiration
122

Depth Cards

Hover Soon

Tri-Layer Parallax

Tri-Layer Parallax
123

Hover Strata

Hover Soon

Five-Layer Drift

Five-Layer Drift
124

X-Band

Drag Soon
Drag me

Horizontal Rubber

Horizontal Rubber
125

Y-Band

Drag Soon
Drag me

Vertical Rubber

Vertical Rubber
126

Snap Pill

Drag Soon
Drag me

Bi-Axial Return

Bi-Axial Return
127

Flip Card

Press Soon

180° Reveal

180° Reveal
128

Hold Ring

Press Soon
Hold 1.5s

Press-and-Hold Commit

Press-and-Hold Commit
129

Arrow Pad

Press Soon
1,1

D-Pad Navigator

D-Pad Navigator
130

Stagger In

Press Soon
Press to cascade

Cascade Tile Entry

Cascade Tile Entry
131

Stair In

Press Soon
Press to cascade

Dense Cascade Entry

Dense Cascade Entry
132

Step Flow

Press Soon
1 2 3 4

Guided Progression

Guided Progression
133

Key Grid

Press Soon

Tactile Keycaps

Tactile Keycaps
134

Pad 16

Press Soon

Sixteen-Key Bank

Sixteen-Key Bank
135

Zoom Pan

Hover Soon

Focal Magnify

Focal Magnify
136

Cursor Ring

Hover Soon

Traced Halo

Traced Halo
137

Square Ripple

Hover Soon

Cell Wake Grid

Cell Wake Grid
138

Tile Field

Hover Soon

Dense Cell Wake

Dense Cell Wake
139

Micro Dots

Hover Soon

Fine Grain Field

Fine Grain Field
140

Orbit Text

Loop Soon
INTERACTIVE · SPECIMEN · IKZIRIV ·

Circular Type Loop

Circular Type Loop
141

Pulse Button

Loop Soon

Beacon Ping

Beacon Ping
142

Breath Ring

Loop Soon
Inhale · Exhale

Respiration Halo

Respiration Halo
143

Wave Text

Loop Soon
LOADING

Glyph Undulation

Glyph Undulation
144

Sync Wave

Loop Soon
SYNCING

Alternate Glyph Wave

Alternate Glyph Wave
145

Spin Dots

Loop Soon

Radial Satellites

Radial Satellites
146

Halo Dots

Loop Soon

Dense Radial Spin

Dense Radial Spin
147

Sine Field

Loop Soon

Ultra-Dense Wave

Ultra-Dense Wave
148

Penta Halo

Loop Soon

Five-Ring Gimbal

Five-Ring Gimbal
149

Horiz Scrub

Drag Soon
Scrub420ms
420

Millisecond Wiper

Millisecond Wiper
150

Swipe Badge

Swipe Soon
Swipe badge

Commit Gesture

Commit Gesture
151

Type Cursor

Type Soon
▌

Terminal Echo

Terminal Echo
Architecture // Protocol

Engineering
Micro-UI.

Built with zero external UI bloat: fine-grained Svelte 5 runes drive GPU-composited transforms while maintaining strict Core Web Vitals budgets.

01 / Fine-Grained Runes

Zero-Wrapper Reactivity

Pointer coordinates and spring states live in $state() and $derived(), updating only affected DOM nodes at 120fps.

02 / Compositor First

GPU Transform Pipeline

All motion interpolates translate3d, scale, and opacity inside fixed-height stages to guarantee CLS = 0.

03 / Multimodal Parity

Pointer + Keyboard + Audio

Pointer capture handles high-velocity drags while semantic ARIA roles and procedural Web Audio ticks provide tactile confirmation.