A showcase of the future of design and development.

Play with fourteen interaction studies, from a gravity field you pull with the pointer to spring and easing curves you drag, each one labelled with the equation behind it.

Try 17 custom web cursors on a live stage, tune follow speed, size, hover scale and color, then copy the result as JS, React or CSS.

Bind values in a React, Vue, Svelte or Solid interface to live controls and tune them in the browser. Sliders, colors, toggles, pads, springs, and an animation timeline.

Drop a credit card component into React, Vue, Svelte or vanilla JS. Detects the brand as the number is typed, formats it, and flips to the back for the CVC.

Add dithered charts to a shadcn project with the CLI. Area, bar, line, pie and radar built on one canvas engine, plus generative avatars, buttons and gradient washes.

Work out the inner radius for a nested corner. Set the outer radius, padding and size on a live card and read back the calculation, with redlines to check the fit.

Show an agent's state as an animated robot head in React. Nine states from thinking to sleeping, four shapes, and shell, trim and screen colors.

Drop map components into a React project with the shadcn CLI. Covers markers, clusters, routes, globes, and heat layers, styled with Tailwind on MapLibre.

Describe an object, device or building and get back a single HTML file: a line-drawn isometric figure whose lit parts glow and whose pieces respond when pressed.

Build pixel art effects from a node graph of over 300 nodes, from pattern generation to fluid and rigidbody simulation. Animate any parameter and render 3D in the same project.

Draw letters and shapes by wrapping simulated rope around a grid of circles. Move and resize the circles, then export the result as SVG.

Copy animated React components into a project with the shadcn CLI, one file each. Covers voice notes, sidebars, orbs, counters, pickers, and reaction bars.

Add Claude Code, Codex, and Grok terminal interfaces to a React app as shadcn components. Covers headers, messages, thinking lines, tool calls, diffs, and composers.

Layer box shadows on a preview card with sliders for X and Y offset, blur, spread, opacity, and color. Start from presets and copy the result as CSS.

Add interaction sounds to a web interface with data attributes for hover, press, release, and toggle. Seventeen cues synthesized live with Web Audio.

Draw and edit font glyphs with a pen tool, curvature combs, and path operations. Opens UFO and Designspace sources and imports Glyphs and Babelfont files.

Rewrite an infinite, seeded grid of modules with rules such as Bond, Split, Rotate, Mirror, and Type that spread to neighboring modules. Rewind the history and export PNG or SVG posters.

Copy React components for AI agent interfaces into a project, by hand or through the shadcn CLI. Covers loaders, thinking traces, approval cards, tool call chips, chat, and tables.

Generate animated gradient backgrounds from 32 shader modes. Tune colors, shape, motion, and grade, then export PNG, MP4, or WebM up to 4K, or copy an embed code.

Tune interactive UI blocks with switches and sliders, then copy their CSS, usage snippet, or a prompt for a coding agent. Includes toggles, dials, docks, sliders, menus, and carousels.

Install animated dot matrix loaders into a React project through the shadcn CLI. Tune size, dot size, speed, color, pattern, and dot shape in a playground that writes the JSX.

Copy UI components for AI agent conversations in React, Vue, or Svelte. Covers thinking states, orbs, file diffs, streaming text, citations, to-do lists, tables, and approval cards.

Add animated React components built with Motion to a project through the Amicro CLI or shadcn. Covers micro-interaction buttons, card spreads, 3D carousels, loaders, and dither charts.

Generate ID card graphics as SVG with a block-pattern cover. Edit the name, ID, date, status, team, and role, pick a palette and seed, or randomize a whole new card.

Copy animated React components and blocks into a project, by hand or through the shadcn CLI. Covers cards, tables, chat panels, buttons, inputs, and navigation.

Generate a cutting mat background as SVG or PNG. Set the mat in centimetres or inches, pick a surface color, and toggle grid, ticks, angle and radius guides.

Wrap any card, button or input in an animated rainbow glow that rides its border. Install from npm for React, React Native, or SwiftUI.

Generate pixel grid artwork from five pattern looks, then set palette, grain, blockiness, and seamless loop motion. Export as PNG, SVG, animated SVG, or MP4.

Tune an animated liquid glass orb with controls for flow, refraction, dispersion, and glow, then copy it out as a web page or SwiftUI Metal code. Start from 13 presets.

Rebuild an image or video out of tiny symbols across four brightness bands, each with its own mark and color. Save a still as a PNG or record the animation as a video.

Drape a holographic cloth in 3D and tune its iridescent shimmer with holo intensity, hue shift, sparkle, and material controls. Poke the fabric to ripple it, then export a transparent or filled PNG.

Pick colors by sliding chroma toward the most vivid version your screen can show, so saturation feels the same at every lightness and hue. Copy the result straight to a CSS oklch() value.

Convert images and MP4 video into ASCII art with a live preview and frame-by-frame timeline scrubber. Adjust columns, threshold, and character set, apply style presets, then export to component code or video.

Apply lo-fi raster effects to uploaded images or MP4 video: stippling, halftone dots, dithering, ASCII, CRT, displacement, and cellular automata. Tune each with sliders and export to PNG or SVG.

Generate layered gradient compositions from randomized bar structures, then shape them with linear, radial, or orbit layouts and VHS, halftone, grain, and 3D-relief treatments. Export to PNG, JPG, or animated MP4.

Build contour drawings on a grid of equal circles by connecting dots with common tangents and closing forms with directional arcs. Tune grid size, radius ratio, and color, then export to PNG or SVG.

Generate wallpapers, backgrounds, OG images, and seamless tiles from animated generative fields. Pick a field and screen style, choose an aspect ratio and palette, then tune speed, zoom, warp, grain, pixelate, and dot size.

Upload images and arrange them into a rotating 3D cloud you spin with drag and inertia. Tune image count, card layout, spread, depth, auto rotation, and per-orientation portrait, landscape, and square ratios.

Track moving blobs in webcam feeds or uploaded video and overlay shape regions, connection lines, and filter effects with configurable count, bounding size, and stroke controls.

Apply real-time shader effects to SVG graphics including particles, ripples, ASCII, metal, chrome, and lines, each with its own set of parametric controls.

Design furniture in a parametric 3D editor and generate panel cutlists with dimensions, quantities, and machining operations.

Upload any image or text and convert it into animated dot-dithered SVG compositions with wave distortion, gooey effects, and path animation controls.

Map brand imagery onto geometric circular layouts with pixelation zones, crosshair frames, and chain-linked circles. Randomize compositions and export composed brand assets.

AI-native design tool where agents create layouts, pages, and graphics in real-time: with 64 MCP tools, flexbox auto-layout, brand systems, and multi-agent collaboration.

Like Photoshop but for shaders. Design layered compositions and export production-ready assets.

An AI-driven particle simulation and real-time visualization engine. 20,000+ particles, orchestrated in perfect harmony using custom physics algorithms.

WebGPU-powered image effects engine. Apply ASCII, dithering, halftone, pixel sort, voronoi, and 15+ other effects with full control over processing and color.

Convert images into ASCII art with customizable character ramps, color modes, and export to PNG, SVG, or TXT.

Midjourney-style sref (style reference) support for every image model. Upload references, generate a style profile, and produce consistent results across models via fal.