Gratify examples

A TypeScript, canvas-rendered UI framework for interfaces rich with micro-interactions — describe your state as pure functions and every change (hover, press, drag, enter/exit, theme swap) animates itself, with no animation code.

• counterthe README hello-world, verbatim — hover, press, and count-up all animate with zero animation code
• todokeyed enter / exit / reflow — add, complete, and delete rows; watch siblings glide
• togglescustom parts: toggle (spring overshoot), slider (drag), checkboxes — one part() each
• undowithUndo(app) middleware — every undo/redo animates like any other state change
• extensionswrap, don't edit — outlined / sheen / chunky / neon applied at definition, theme, and use-site scopes
• keyboard-and-dragFocusable + Keys + a reorder Gesture composed on one row — arrows or drag, siblings glide
• node-editorthe M3 flagship: pan/zoom surface, anchored wires you can click and cut, magnetic wire-drag, Shift-drag slice (one app-side file)
• bordersnone / single / double / sunken / raised — bevels that flip when pressed
• combo-buttonclick fast — heat, shake, glow, and particles all build with your click rate
• global-effectsstock controls written normally, then a subtle shake and a pointer-following magnify wrapped over ALL of them at once — the effect is a function of a part, applied globally, nothing edited
• widget-board15 Kea-style creative-tool controls — sliders, ranges, angles, arcs, XY/box/cube, color wheel — on a pannable canvas
• attentioneight idle cues that ask to be interacted with — heartbeat glow, sheen sweep, sonar badge, idle nudge, marching drop zone, blinking key prompt, shimmer, spotlight — and stop the moment you answer
• huda game heads-up display — health with a damage ghost, XP that flashes and rolls over, a punching level badge and drop-in banner, a rolling odometer, hold-to-launch, cooldown wipes on 1–4 abilities, sliding toasts
• title-screena game main menu — a sheened, breathing title over drifting motes with pointer parallax, a pulsing press-Enter prompt, menu items that cascade in with a springing selector, and glass panels that slide in: save slots, a stretching difficulty pill, options
• juice-gallerya 3×3 grid of buttons and sliders, each with a different juicy effect — squash, pop, wobble, magnet, confetti, spring, comet, elastic, rainbow — every one a channel or a particle
• split-panecustom layout parts — a draggable-divider split pane and a wrapping Flow of buttons; an external slider resizes every button and the flow re-wraps, all with animated reflow
• compositesparts made of parts — a Card body facet, a use-site mapBody injection, and a theme-scope mapBody that adds a footer to every card at once
• adornmentstooltips, badges, and close buttons layered onto plain cards by composition — hover, click ×, watch them enter/exit
• dropdowninstance-local state — a modal select whose open flag never touches the Doc (undo can't re-open it), plus a draft number field committing one intent
• islanda real DOM <input> glued to a world rect through pan/zoom — drag the card, pan, zoom, keep typing; onCommit reports every doc change below
• three-transformGratify as an animated tool-panel HUD composited over a live Three.js render loop — sliders drive a spinning mesh's transform through a shared doc
• data-grid10,000 rows at the cost of 30 — a virtualized table with sortable headers, drag-to-resize columns, shift/ctrl selection, a keyboard cursor the list keeps in view, and instance-local scroll (undo never scrolls it)
• tree-viewa schema explorer over 8,000 nodes — chevrons that spring open, kind icons, the standard arrow-key idiom, jump-to-deep-node, all through one virtualized list
• schema-graphtables as multi-port nodes, foreign keys as wires — marquee and shift/ctrl selection, group drag, port-to-port key creation, a layered auto-arrange every table springs into, and a minimap that reads the live viewport
• windowsfloating glass windows on a desktop — drag titles and edges, minimize into a dock, maximize, close; one gesture, one reducer, every motion free
• workbenchthe database browser assembled — schema tree, the selected table's rows in a virtualized grid, and the relationship graph, in draggable split panes; one selection fact drives all three, and every pane keeps its own scroll
• focus-semanticsTab/Shift-Tab focus ring + Enter/Space activation, tooltip adornments lifted above sibling badges with z-tiers, and a live semanticsTree() readout