Component theme

Drag & Reorder

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

• FLIP Reorder7-row list reorders via FLIP spring physics on drag or arrow-key input; lifted card gains glow outline while others spring to new slots. Auto-demos when idle.
• Kanban MoveThree-column kanban board where a cyan card lifts and spring-animates between lanes via FLIP. Auto-demos on a timer; supports arrow keys and horizontal drag.
• 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; auto-shuffles on idle as a demo.
• Snap SliderOchre-accent range slider with 9 tick detents; thumb flicks with spring momentum and rubber-bands at ends. Self-demos on idle, accepts keyboard input.
• Dual RangeCanvas dual-range slider with two spring-driven thumbs (white lo, amber hi), hatched fill, delta readout, and tick marks. Auto-breathes when idle.
• 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.
• Split PaneTwo color-coded panes (amber/pink) split by a draggable cyan divider; the divider springs to position with grip squash, auto-sweeping gently when idle.