# Motion & Material Studies > A live collection of graphics and interaction studies designed and built by Adam Amr: custom shaders, GPU particle systems, volumetric rendering, water, woven material, glass, typography, animated diagrams, and a browser game. [Open the lab](https://adamamr.me/lab/) ยท [Portfolio](https://adamamr.me/projects/) ## What the lab is The lab brings 17 experiments into one interactive browser workspace. Each study has a direct URL and controls for manipulating its material, movement, or composition. These are running implementations: people can fly a droid through a factory, scatter particles, load their own SVG artwork, flick a metal rotor, disturb water, reposition moonlight, and inspect the weave of a fabric shader. The collection includes original experiments and recreations of visual ideas Adam wanted to understand and build. The glass orb recreates the Siri orb; the fabric study was inspired by the shader in Apple Sports. The diagrams draw on his freight software and thesis proposal. The lab is also a place to develop and isolate interaction and graphics work from larger products. ## Adam's work Adam designed and built the studies and the shared interface around them. The work covers visual direction, custom GLSL shaders, rendering and animation systems, GPU particle simulation, SVG artwork analysis, material and lighting treatments, responsive controls, and pointer and keyboard interaction. The implementations use different techniques for different scenes. The particle studies simulate their state on the GPU. The air scooter uses volumetric shaders in a Three.js scene. The liquid rotor, water, cosmic forms, glass, and fabric use custom shader treatments. The liquid diagram combines SVG filters with choreographed transitions; the living diagrams sequence signals through connected workflows. Droidy pairs a character Adam modelled, rigged, and animated in Blender with a Three.js game: its own physics, collisions, and liquid rotor hazards. The particle studies use up to 131,072 particles on desktop and 65,536 on devices with a coarse pointer. Controls and rendering adapt to the available space and device, with pause controls and reduced-motion handling where applicable. ## Studies ### Droidy [Open Droidy](https://adamamr.me/lab/droidy) Droidy, a browser game by Adam Amr starring a plush droid he designed, built, and animated in Blender. Hold to fly through a factory of liquid rotors and rockets, with the furry character, sewn overalls, and hard hat rendered live in WebGL. Adam made the character in Blender, building it largely with Python scripts. The plush body is a single watertight form: signed-distance shapes smooth-unioned and meshed with OpenVDB, then covered in 300,000 hair curves of short minky pile. Glossy bead eyes and a satin-stitch smile and brows sit on the surface, and the procedural hard hat and fitted, sewn overalls follow real construction details. He rigged and animated it in Blender, and an export script bakes the geometry, skin weights, and motion into a skinned glTF. In the browser, the fabric and fur are rebuilt in Three.js: the fur as instanced shells that follow the rig, each strand drawn with its pixel coverage so the stacked shells add up to the soft halo of the Blender render. ### Bot engine [Open Bot engine](https://adamamr.me/lab/bot-engine) Adam Amr's recreation of the Grok bot characters as a live character engine. The bot moves, emotes and changes shape in the browser in real time. It comes in 30 bodies, from a blob and a gem to a ghost and a cloud, with 11 colors, 9 faces and 54 states. Each state has its own motion: the bot idles, thinks, celebrates a finished task with happy eyes, and nods off with sleepy ones. In the spinner states, the body itself melts into a loading ring, an orbit or a radar sweep, then folds back into the bot. Its eyes follow your pointer and change expression through a blink, and you can poke it to make it spin, bounce or nod. Every frame is computed live, not played back from a video. Each body is a small 3D form that turns in space and is projected into clean SVG outlines. The eyes sit on its surface and get cut off at the edge as it turns away. Switching bodies or spinners blends one silhouette smoothly into the next. Adam built the whole engine in TypeScript: the director that sequences each state's motion, the face system, the body and spinner morphing, and the renderer. He also built the studio around it for picking bodies, colors, faces and states. ### Swarm studio [Open Swarm studio](https://adamamr.me/lab/swarm-studio) Turn SVG artwork into up to 131,072 GPU-simulated particles with Swarm studio by Adam Amr. Drop or paste an SVG, preserve its color proportions, and morph between artworks with flowing trails and interactive motion. ### Liquid rotor [Open Liquid rotor](https://adamamr.me/lab/liquid-rotor) A liquid metal rotor built with custom WebGL shaders by Adam Amr. Drag or flick it through chrome, gold, oil-slick, and orange-black materials, with liquid deformation, studio reflections, and motion blur. ### Rotor swarm [Open Rotor swarm](https://adamamr.me/lab/rotor-swarm) Up to 131,072 GPU-simulated particles assemble into a spinning rotor by Adam Amr. Scatter the form and watch it regroup, with glowing trails, pointer interaction, and live control over cohesion, spin, and palette. ### Moon tide [Open Moon tide](https://adamamr.me/lab/moon-tide) A moonlit ocean rendered with custom WebGL shaders by Adam Amr: rolling swells, wind-driven surface detail, crest foam, and shimmering moonlight. Shape the sea, drag the moon across the sky, or switch to an eclipse. ### Yin-yang [Open Yin-yang](https://adamamr.me/lab/yin-yang) A cosmic yin-yang built with custom GLSL shaders by Adam Amr: interlocking galaxies or churning nebulae, threaded with stars, dust lanes, and luminous gas, with live control over rotation and twist. ### Air scooter [Open Air scooter](https://adamamr.me/lab/air-scooter) A swirling sphere of air in a navigable 3D scene by Adam Amr. Custom volumetric shaders shape the turbulent wind, with moving dust, adjustable flow and density, and an orbitable camera. ### Fabric [Open Fabric](https://adamamr.me/lab/fabric) Woven fabric recreated in WebGL by Adam Amr, with individual threads crossing over and under, raised fibers catching the light, and folds rolling through the cloth. Change the palette, wind, and scale to inspect the weave. ### Orb [Open Orb](https://adamamr.me/lab/orb) A glass orb recreated with custom WebGL and GLSL by Adam Amr: moving light, layered rim reflections, and a dimpled surface, with adjustable lighting, deformation, backgrounds, and frozen animation poses. ### ASCII fire [Open ASCII fire](https://adamamr.me/lab/ascii-fire) Fire drawn entirely in ASCII characters by Adam Amr: flickering silhouettes, shifting character density, and glowing orange type, with live controls for flame strength, animation frame, and background. ### Lightning [Open Lightning](https://adamamr.me/lab/lightning) Branching lightning built by Adam Amr, from the advancing stepped leader to the white-hot core and fading glow. Strike anywhere or let a storm unfold, with live controls for branching, thickness, color, and light. ### Heat [Open Heat](https://adamamr.me/lab/heat) The Miami Heat palette in four custom WebGL shaders by Adam Amr: a folding flow, heat haze rising in lit layers off a hot floor, the flow rising as flickering fire, and the flow streaming diagonally like the flame trail in the logo. Heat Red, the brighter 1988 red, a deep red shadow, and yellow where it runs hottest. ### AI questionnaire [Open AI questionnaire](https://adamamr.me/lab/ai-questionnaire) An AI questionnaire by Adam Amr, from Found: when the agent needs a few answers before it searches, the message box turns into the form and asks for choices, counts, budgets, places, dates, and notes. Digits pick options, typing starts an answer, the microphone records live, and the send and microphone controls never move. Adam designed and built the questionnaire for Found, his accommodation research app. In Found the agent asks through a tool call when two or more unknowns block a useful search; in the lab, scripted questions stand in for the agent so each question kind and the transitions between them can be tried on their own. ### Color picker [Open Color picker](https://adamamr.me/lab/color-picker) A tactile color picker designed and built by Adam Amr, with sculpted bevels, contour-following highlights, and draggable color controls. Its light and dark surfaces adapt to the selected color and available width. ### Living diagram [Open Living diagram](https://adamamr.me/lab/living-diagram) Process diagrams brought to life by Adam Amr: animated RFQ and research workflows with traveling signals, illuminated connections, and sequenced transitions that make the flow of work legible. ### Gooey diagram [Open Gooey diagram](https://adamamr.me/lab/gooey-diagram) A liquid process diagram by Adam Amr where layers stretch, merge, tear apart, and recoil as the story advances. SVG filters and choreographed motion turn a static architecture diagram into a continuous transformation.