The Vibeary — tag

interactive

34 resources in The Vibeary tagged "interactive" — tools, libraries and references pulled from across the library's shelves, each one checked by hand before it was added.

Gems in this collection

Preview of An Interactive Guide to CSS Grid

An Interactive Guide to CSS Grid

Illustrated walkthrough of grid with manipulable demos covering implicit tracks, alignment, subgrid and the fr unit.

Josh W. Comeau (@joshwcomeau)free
Preview of An Interactive Guide to Flexbox

An Interactive Guide to Flexbox

Long-form tutorial with live editable demos explaining flexbox's algorithm, hypothetical sizes, and why flex-basis differs from width.

Josh W. Comeau (@joshwcomeau)free
Preview of Whimsical Animations

Whimsical Animations

Interactive course and playground on building playful, physical web animations, with runnable demos throughout.

Josh W. Comeau (@joshwcomeau)paid
Preview of Unicorn Studio

Unicorn Studio

No-code editor for building interactive WebGL scenes and effects and embedding them on any website.

Unknownfreemium
Preview of The Evolution of Trust

The Evolution of Trust

Playable game-theory explainer teaching repeated prisoner's dilemma strategies through interactive tournaments you run and tweak yourself.

Nicky Case (@ncasenmare)free
Preview of Explorable Explanations

Explorable Explanations

Hub collecting interactive playable essays and learning-through-play experiences from artists, coders and educators.

Nicky Case and contributors (@ncasenmare)free
Preview of The Pudding

The Pudding

Visual essay publication combining data journalism with bespoke scrollytelling interactions; most projects open-source their code.

The Pudding (@puddingviz)free
Preview of Red Blob Games

Red Blob Games

Interactive visual explanations of game algorithms: A* pathfinding, hex grids, field of view, noise-based map generation, Voronoi.

Amit Patel (@redblobgames)free
Preview of treeviz

treeviz

Small library for rendering customisable interactive tree diagrams from JSON with collapsible nodes.

Pierre Capo (@PierreCapo)MIT
Preview of Rive

Rive

Vector animation editor with a state-machine runtime, so animations respond to app state and input rather than replaying linearly.

Rivefreemium
Preview of Decker

Decker

Multimedia sketchpad in the HyperCard tradition for building interactive documents, toys and games with a 1-bit aesthetic.

John Earnest (@JohnEarnest)MIT
Preview of Holosticker

Holosticker

Browser studio that turns artwork into holographic foil stickers with interactive tilt-reactive shine.

jal-coopen-source
Preview of Spline

Spline

Browser-based 3D design tool with materials, physics, particles and export to React, Next.js, Swift and Kotlin.

Splinefreemium
Preview of Radiant

Radiant

Collection of 130+ production-ready web shaders, each a self-contained HTML file with no build step, dependencies or bundler.

Paul Bakaus (@pbakaus)MIT
Preview of A Primer on Bézier Curves

A Primer on Bézier Curves

Free interactive book covering Bézier math, de Casteljau, offsetting, intersection, arc approximation and curve fitting.

Pomax (@TheRealPomax)open-source
Preview of cables.gl

cables.gl

Node-based visual programming environment for building interactive WebGL scenes and exporting them as embeddable pages.

undev (undefined development UG)open-source
Preview of Interactive SVG Animations

Interactive SVG Animations

Interactive mini-course teaching SVG animation techniques with editable inline examples.

Nanda Syahrasyadfreemium
Preview of The Magnificent 2D Matrix

The Magnificent 2D Matrix

Single-page interactive toy where dragging a 2D transformation matrix's values shows their geometric effect in real time.

Nicky Case (@ncasenmare)free
Preview of Complexity Explorables

Complexity Explorables

Forty-plus interactive simulations of complex systems: flocking, epidemics, Ising models, opinion dynamics and reaction-diffusion.

Dirk Brockmannfree
Preview of The Book of Shaders

The Book of Shaders

Chapter-by-chapter guide to fragment shaders with a live GLSL editor embedded in every example.

Patricio Gonzalez Vivo & Jen Lowe (@patriciogv)free
Preview of Softie

Softie

WebGPU slime you poke, knead and lift with springy physics, color presets and squish audio in the browser.

@yuanyang749MIT
Preview of SOUND TERRARIUM

SOUND TERRARIUM

Tiny living world where microphone bands raise the terrain while real-world time, weather and moon phase shape the sky — browser port of a Cardputer toy.

@kariagepompadourMIT
Preview of Newton's Orchard

Newton's Orchard

Browser gravity playground with deterministic time scrubbing, fully editable bodies, preset solar systems, unlockable missions and a user-submission gallery.

Andrew Childs (@andrewchilds)open-source
Preview of Sylva

Sylva

Complete landing page built around a procedural, pointer-responsive Three.js moss world, with liquid-metal panels and editorial layout, source on GitHub.

Meng To (@MengTo)unknown
Preview of ModelMap

ModelMap

Generates interactive animated architecture diagrams for any Hugging Face model, showing layers and tensor flow you can step through.

@lizhaoliufree
Preview of Fragment Foundry

Fragment Foundry

Interactive scrollable fragment-shader tutorial where the shader recompiles live as you edit inline code.

Hugh Kennedy (@hughskennedy)open-source
Preview of Amelia Wattenberger

Amelia Wattenberger

Essays on interface design and tools for thought, each built as its own custom interactive artifact.

Amelia Wattenberger (@wattenberger)free
Preview of Matrix Multiplication

Matrix Multiplication

One-page animated visualiser that walks through matrix multiplication step by step with your own input values.

Fadi Shawkifree
Preview of Immersive Math

Immersive Math

Fully interactive linear algebra textbook where every figure is a manipulable 3D or 2D visualisation.

Jacob Ström, Kalle Åström, Tomas Akenine-Möllerfree
Preview of Explained Visually

Explained Visually

Interactive explanations of statistics and linear algebra: eigenvectors, PCA, Markov chains, image kernels and least squares.

Setosa (@setosaio)free
Preview of MyPhysicsLab

MyPhysicsLab

Library of real-time physics simulations — pendulums, springs, collisions — with editable parameters and published equations.

Erik Neumannopen-source
Preview of Pixel Shaders

Pixel Shaders

Unfinished but excellent interactive book introducing graphics programming through progressively edited fragment shaders.

Toby Schachman (@tobyschachman)free
Preview of ciechanow.ski

ciechanow.ski

Interactive articles explaining science and engineering — lenses, GPS, gears, sound, mechanical watches — with manipulable inline simulations.

Bartosz Ciechanowski (@BCiechanowski)free
Preview of Dygraphs

Dygraphs

Interactive time-series chart library built for hundreds of thousands of points with range selectors, synchronisation and error bands.

Dan Vanderkam (@danvk)MIT