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
• 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
• focus-semanticsTab/Shift-Tab focus ring + Enter/Space activation, tooltip adornments lifted above sibling badges with z-tiers, and a live semanticsTree() readout