Templates / Start with something
Small, focused starters with working interactions and editable source. Each package clearly states what is included.
Interactive heroes to start a page with.
Hero / HTML · CSS · JS
A standalone particle-driven opening to adapt to your own page.
Use this when you need an interactive opening for a site. Add your own navigation, content and remaining pages.
Working tool surfaces with export built in.
Creative tool / HTML · CSS · JS
A complete background-making surface with image export.
Use this to explore creative tools, canvas interaction and image export. Adapt the controls and visual materials to your own project.
Tab bars, switches, cards, pricing and search with a physical feel: try them here, take the code.
Media player / HTML · CSS · JS · WebGL
A music player made of one thick slab of glass over the album's wallpaper. The slab refracts and magnifies what is behind it, with a bright rim, side walls you see into and the title engraved on its edge; the progress bar is a liquid thread you click, drag or swipe, and every track cross-fades the wallpaper, the cover and the tint of the glass. Play / pause, previous / next, shuffle and repeat, a ••• menu with the queue, a palette view where the empty slab splits the album's colour bands, a minimized glass card, a full-height sheet and mini bar on the phone, keys for everything, Media Session and reduced motion.
Use it as the player of a music, podcast or radio site: the tracks, covers and palettes are in img/manifest.js, and there is no audio yet (the clock is simulated), so connect your own audio element in js/app.js. AURA SOUND and its artists are made up; the images are AI-generated (Google Gemini) and the glass is made in code.
Pricing / HTML · CSS · JS
A pricing section where the plans are three car keys on a leather pad. Press a key and the car behind them flashes its headlights twice, the key dips and the plan card rises beside it with its features; ENGINE START/STOP switches every price to yearly with a 15 % saving as the numbers roll. A real radio group (click, arrows, Home, End), a compare table that follows the key, the choice saved for the next visit, a bottom sheet on the phone and reduced motion.
Use it as the plans section of a subscription, a membership or a premium product: the plans, prices and features are in the page and the compare table. Auverne Garage is a made-up brand; the car and key fob photos are AI-generated (Google Gemini).
Cookie consent / HTML · CSS · JS · three.js
A cookie banner as a plate of four real-time 3D fortune cookies. Crack one and its paper slides out with what that category does and a real switch; flip it and the page changes at once: an oven counter and heat badges, a menu reordered to your taste, a Sunday offer. Accept all cracks the rest in a cascade, Reject is just as easy, and the panel tucks into a cookie in the corner to reopen. Gated scripts stay inert until allowed, switching a category off deletes its data, and without JavaScript the page stays readable.
Use it as the cookie consent of any site: put your own analytics and marketing scripts behind data-consent and they run only once allowed. ORVELLE is a made-up brand; the 3D and the pastry pictures are made in code (three.js).
Order tracking / HTML · CSS · JS · three.js
A live pizza delivery tracker: a frosted glass order panel over a toy 3D town. One number drives everything: the pizza bakes in the oven, flies into its box, the lid folds and a sticker lands, then a scooter rides the route to your door and confetti pops. The camera glides between the shots, the town turns from day to golden hour to night, and a demo bar scrubs the whole order. Message, rate and order-again dialogs, a bottom sheet on the phone, reduced motion and a flat SVG fallback.
Use it as the order-status page of a food, grocery or parcel delivery: set the order time from your own feed (or ?t= for a moment), and the panel, the ETA and the 3D scene follow. pizzatime is a made-up brand; the 3D is made in code (three.js).
FAQ / HTML · CSS · JS
An FAQ section that answers like a chat. Ask in your own words, even with typos: the matcher finds the answer in the browser, typing dots show, and the reply streams in, cloned from the same content as the accordion. Topic tabs, a search with highlights, follow-up chips, a live battery slider in an answer, thumbs and a hand-off form to a person. Without JavaScript it is a plain accordion with every answer. Two skins, Lifestyle and Bold, for the made-up e-bike brand VOLTA.
Use it as the help or FAQ section of any product site: the questions, answers and topics are one JSON block in the page (data/faq.json is its copy). The hand-off form sends nothing; put your own request in its place in js/ask.js.
Navigation / HTML · CSS · JS
A sidebar that is a bookshelf. Pick a book and it flies off the shelf and opens in 3D with its chapters, lessons and progress; search dims the shelf and lights the matches, drag the books (or Alt + arrows) into a new order, add a course of your own and undo a removal. A rail, an evening lamp and a phone strip with a chapters sheet. Two looks on one engine: a walnut Library of cloth books and a light-oak Nordic shelf of notebooks.
Use it as the navigation of a course site, a docs site or a notes app: the books are the data in library/data.js and nordic/data.js. The order, progress and theme are kept in localStorage.
Navigation / HTML · CSS · JS · WebGL
A glass sidebar whose active item is a drop of liquid. The drop stretches as it runs between items, settles with a wobble, folds into a bead on the icon rail and ripples when a notification arrives. Nested groups, ⌘K palette, G-key jumps, drag or Alt + arrows to reorder, a workspace menu and a bottom sheet on the phone. Two looks on one core: Graphite with a mercury drop, Daylight with a water drop over a photo.
Use it as the main navigation of a web app or a dashboard: the items, groups and views come from one config object per look (graphite.js, daylight.js). Without WebGL the active item keeps a glass pill; ?quiet stops the demo notifications.
Controls / HTML · CSS · JS
An espresso machine panel with three real rotary dials for temperature, pressure and grind: drag round them, tap the scale, use the wheel or the arrow keys. Pick a recipe and the dials glide to it; pull the shot and the pressure and flow graph draws live as the cup fills, then a verdict says whether to grind finer or coarser. The temperature dial glows blue, ready or too hot.
Use the dial anywhere a value is turned: a thermostat, a mixer, a settings panel. The recipes are RECIPES in sim.js; window.__brew sets the dials and pulls a shot from your own code.
Forms / HTML · CSS · JS
A one-time-code input built as a slot machine. Six chrome reels mirror one real input, so SMS autofill, paste and screen readers just work: each digit spins its reel onto the number, Backspace rolls it back, and the lever submits. A wrong code flashes red and costs an attempt, three misses lock it for 30 seconds, and the right one hits the jackpot and opens the shoe box.
Use it as the verification step of a sign-in, a checkout or a product drop. The mock verifier accepts 481927 (?code= sets another); put your own request in its place in app.js.
Seat map / HTML · CSS · JS
A ticketing seat picker on a stadium tilted in 3D. Hover a section and it lifts in its price tier's colour; click it and the map flies in to its seats. Pick seats one by one or several together, let Best available choose, narrow the price range, and watch the cart hold them for ten minutes. Checkout prints QR tickets you can tear off. Keyboard, screen reader, a bottom sheet on a phone, reduced motion.
Use it as the seat step of a concert, sports or theatre checkout. The sections, rows, tiers and prices are generated in js/model.js; put your own view photos in assets/incoming/views.json.
Calculator / HTML · CSS · JS · WebGL2
A scientific calculator made of one slab of clear glass standing in a photo studio. The keys are lenses, the liquid inside sloshes when you press a key or drag the glass, and a real expression engine (a Pratt parser) does the maths, with a history tape and a scientific layout that grows out of the basic one. Five tones, one WebGL2 pass.
Use it as a calculator widget or the showpiece of a finance or tools page. Pick a tone with ?tone=classic, crystal, amber, graphite or prism; window.__calc types into it from your own code.
Audio player / HTML · CSS · JS
A record label's site with a turntable you play by hand. Start the platter, lower the needle with the cue lever, hold or scratch the record, slide the pitch or glide from 33 to 45: the sound is read off the spinning record in an AudioWorklet, so the picture and the pitch bend together. VU meters from the real levels, a label printed with the playing track, releases that cue the needle.
Use it as the player of a label, an artist or a podcast. Put your side in audio/ and its tracks in catalog.js; the releases and the artists are in data.js. Serve it over http: the worklet and the audio need it.
Checkout / HTML · CSS · JS
A clay grocery shop where you throw the product instead of pressing Add to cart. Grab it off its card and fling it: the magnet over the basket catches it, the basket dips, the roller counter rolls and the coin flips. Free delivery unlocks at $25, and Checkout prints a clay receipt. A panel on a desk, a dock on a phone, the keyboard and reduced motion.
Use it as the basket of a playful store or a landing page. Put your products in js/catalogue.js and img/; the delivery fee and the free-delivery threshold are at the top of js/order.js.
Carousel / HTML · CSS · JS
A carousel of picture cards that never runs out. Every card is a window whose picture moves inside it; drag and throw it, step with the arrows, the dots, the keys or the wheel, and tap the front card to open its detail. Three looks move in three ways: films line a curved wide screen, framed products swing on threads, cars drift in on tyre smoke and flash their headlights.
Use it as the showcase of a store, a cinema or a collection. Put your pictures in img/ and your words in the look table at the top of app.js; pick a look with ?look=films, icons or cars.
Forms / HTML · CSS · JS
A form's file inputs that carry the upload themselves. Choose or drop a file and the field turns into its company's little world: a truck drives it across, a crane lays it block by block, a coin rolls it into the lock. Type and size checks, error and retry, remove, and a submit button that waits for every field.
Use it in any form: each field is a real input type=file. Set ENDPOINT to your server and real files go up with XMLHttpRequest. Pick a company with ?look=freight, tower or vault.
Feedback / HTML · CSS · JS
Toast notifications that stack like a deck and fan out when you point at them. Swipe one away, undo with a countdown, watch an upload or a deploy fill and turn into done, retry an error. Rich content: app, face, amount, code, two actions.
Drop it into any app: call toast({ kind, title, desc, actions }) from your own code. Pick a look with ?look=frost, mono or ivory.
Forms / HTML · CSS · JS
A sign-in card with a character that watches you type: it follows the letters, covers its eyes for the password, frowns at a wrong email and jumps for joy. Fields check themselves as you go; one piece of glass reshapes for sign in, create account, the code and done.
Drop it into any app or site as its sign-in page. Pick a look with ?look=glass, nordic or clay; ?full=1 shows the page on its own.
Navigation / HTML · CSS · JS
A floating capsule nav that pours down into one panel and reshapes between the sections, with a lens that follows the pointer. It re-flows from desktop to tablet to phone by its container.
Drop it into any marketing site. Edit the four sections in index.html; pick a look with ?look=glass, metal or island.
Theme switch / HTML · CSS · JS
A light/dark switch: the moon eclipses the sun and the whole page turns to night in a shockwave that spreads from the switch.
Drop it into any site header. The theme is real (CSS variables, saved choice, system setting); pick a look with ?look=aurora, acid or holo.
Product card / HTML · CSS · JS
A product card where the shoe pops out of the card into the bag and the card flips to a mini-cart receipt with a working stepper.
Use it on a product listing or a landing page. Swap the photos in img/, the name and the price; pick a look with ?look=glass, swiss or luxe.
Pricing / HTML · CSS · JS
A team-size pricing calculator: drag 1–100 people and the price rolls like an odometer, the plan changes and the features unlock.
Use it on a SaaS pricing page. Set the tiers and per-seat prices at the top of app.js; pick a look with ?look=synth, clay or blueprint.
Search / HTML · CSS · JS
A ⌘K command palette: the search button morphs into the panel, fuzzy search lights the matched letters and the selection glides between rows.
Drop it into any app or docs site. Replace the item list at the top of app.js; pick a look with ?look=night, bubble or catalog.
Tab bar / HTML · CSS · JS
A glass lens follows your finger across the bar, stretches with speed and magnifies the icons under it.
Use it as the bottom navigation of a mobile web app. Swap the icons, the labels and the colours at the top of the CSS.
Tab bar / HTML · CSS · JS
The chosen tab is a drop of the bar itself: it sinks, runs along as a wave and rises out of the bar at the next tab.
Use it where a navigation should feel soft and playful. Four more palettes are built in: add ?palette=mint, gold, coral or lime.
Tab bar / HTML · CSS · JS
A glossy ball rolls into a soft notch in the bar; the notch follows it like a wave and the icon rises into the ball.
Use it as a bold bottom bar. Five palettes are built in: add ?palette=midnight, snow, cobalt or plum.
The shelf grows with the collection — a starter is added when a released piece is ready to be taken apart.
Every starter
Review the package and repository terms for your intended use. The soundtrack is not included in this download.