Component theme

Drag & Reorder

20 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Kanban MoveThree-column kanban board where a cyan card lifts and spring-animates between lanes via FLIP. Idle demo stops after first input; supports arrow keys and…
• Pull to RefreshA 5-row canvas list springs down on drag, revealing diagonal bars and a rotating geometric indicator; releasing past threshold triggers a 1.5s sync spinner.
• Sortable Grid3x3 grid of colored numbered tiles that spring-animate into position as tiles are dragged or swapped; initial idle shuffle stops after first input.
• Dual RangeCanvas dual-range slider with two spring-driven thumbs (white lo, amber hi), hatched fill, delta readout, and tick marks. Initial breathing stops after…
• Carousel ThrowSeven colored cards orbit a glowing hub in a radial ring; drag to fling with angular inertia, release to snap to the nearest card under the marker.
• Drag Handle5 dark rows with grip handles spring-animate to new positions when dragged or arrow-keyed; the lifted row glows cyan and scales up slightly.
• Spring Physics StackPriority queue you reorder by dragging: the lifted row tilts with pointer velocity and neighbours spring into place.
• Magnetic Kanban SwimlanesTwo-lane kanban board: lift a card and a dashed placeholder snaps between lanes as you drag; lane counts update on drop.
• Gear Pack ColumnArcade ink palette with gold, cyan and green pixel gear; drag or tap items into a weighted backpack column, with bounce and overflow feedback.
• Gear Equip OrbitArcade ink palette with gold, cyan and green pixel gear; tap items into an elastic equip orbit and track capacity around its rim.
• Gear Fling RailArcade ink palette with gold, cyan and green pixel gear; fling items into a weighted rail with elastic settling and capacity feedback.
• Gear Slot FieldArcade ink palette with gold, cyan and green pixel gear; hover to magnify slots and hold to equip them above a load wave.
• Hex Pack InventoryStone-and-parchment palette with terracotta accents; drag geometric gear into a central hexagonal pack with a perimeter capacity gauge.
• Balance Pack InventoryStone-and-parchment palette with terracotta accents; tap polygon gear onto a balance pan whose beam responds to the weight limit.
• Hex Flip InventoryStone-and-parchment palette with terracotta accents; tap folding hexagonal gear cells and watch nested capacity rings fill.
• Slab Rack InventoryStone-and-parchment palette with terracotta accents; fling gridded slabs into a gravity-stacked equipment rack with a dashed weight limit.
• Lamplight Capacity OrbitLamplight-on-navy palette with warm gold accents; tap equipment around a capacity orbit with painterly ring strokes and spring settling.
• Lamplight Weight RailLamplight-on-navy palette with warm gold accents; drag or tap brushstroke gear into a weighted rail with elastic tilt and capacity feedback.
• Lamplight Pack ColumnLamplight-on-navy palette with warm gold accents; drag or tap gear into a vertical backpack column with a rippling load surface.
• Lamplight Field InventoryLamplight-on-navy palette with warm gold accents; tap gear controls to fill a painterly slot field, with proximity magnification and rejection ripples.