3D objects
ProChrome Blob: open the element page
Chrome Blob
A metallic sphere that distorts as it turns, with studio reflections.
- Price
- USD 10, all access
- Built with
- React Three Fiber
Visual elements for React.
3D objects, shader backgrounds, text effects and cards, each one a single React file. Free elements are copied from the page. Pro elements are bought once.
- 29
- Elements
- 07
- Free
- 06
- Kinds
- React 19
- Runs on
The library
Each tile is the element running. Open one to change its settings, then copy the code or buy it.
29 / 29
Backgrounds
FreeAurora: open the element page
Aurora
A slow gradient background in three colours.
- Price
- Free
- Built with
- React Three Fiber
Interactive
ProParticle Field: open the element page
Particle Field
12,000 points that move away from the cursor.
- Price
- USD 10, all access
- Built with
- React Three Fiber
3D objects
ProOrbit Rings: open the element page
Orbit Rings
Five metal rings on tilted orbits, each turning at its own speed.
- Price
- USD 10, all access
- Built with
- React Three Fiber
Cards
FreeGlass Card: open the element page
Glass Card
A frosted card that tilts toward the cursor, with a moving highlight.
- Price
- Free
- Built with
- Framer Motion
Text effects
FreeChrome Type: open the element page
Chrome Type
Headline text with a moving chrome finish.
- Price
- Free
- Built with
- Framer Motion
Backgrounds
FreeGrid Warp: open the element page
Grid Warp
A hairline grid that bends around the cursor.
- Price
- Free
- Built with
- Plain React
Cards
ProHolo Card: open the element page
Holo Card
A card with a holographic foil finish that shifts as it tilts.
- Price
- USD 10, all access
- Built with
- Framer Motion
3D objects
ProSilk: open the element page
Silk
A sheet of satin with moving folds.
- Price
- USD 10, all access
- Built with
- React Three Fiber
3D objects
ProPrism: open the element page
Prism
A glass knot that refracts what sits behind it.
- Price
- USD 10, all access
- Built with
- React Three Fiber
Backgrounds
ProMarble Ink: open the element page
Marble Ink
Marbled ink in your colours, with metallic veins, slowly turning.
- Price
- USD 10, all access
- Built with
- React Three Fiber
Backgrounds
FreeTopography: open the element page
Topography
Contour lines of a landscape that slowly changes.
- Price
- Free
- Built with
- React Three Fiber
Backgrounds
FreeFilm Grain: open the element page
Film Grain
A two-colour gradient under moving film grain.
- Price
- Free
- Built with
- Plain React
Interactive
FreeInk Cursor: open the element page
Ink Cursor
The pointer leaves a trail of ink that spreads and fades.
- Price
- Free
- Built with
- Plain React
Morphology 01
ProCilia: open the element page
Cilia
A ribbed form on a curved axis, with the rib tips lit.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 02
ProMedusa: open the element page
Medusa
A jellyfish with a pulsing bell and sixteen trailing tentacles.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 03
ProDiatom: open the element page
Diatom
A radial shell with a lattice of pores.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 04
ProPhyllotaxis: open the element page
Phyllotaxis
A seed head on the golden angle, with a pulse moving outward.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 05
ProNautilus: open the element page
Nautilus
A logarithmic spiral with chambers, the walls lit in turn.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 06
ProMurmuration: open the element page
Murmuration
A flock of 7,000 points that follows the cursor.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 07
ProMycelium: open the element page
Mycelium
42 hyphae growing from a centre, branching and regrowing.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 08
ProNeuron: open the element page
Neuron
A cell body with nine dendrites and a signal running along them.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 09
ProAmoeba: open the element page
Amoeba
A cell that reaches toward the cursor.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 10
ProSea Fan: open the element page
Sea Fan
34 branches rising from one holdfast, swaying in a current.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 11
ProRadiolarian: open the element page
Radiolarian
A spiked sphere turning in three dimensions, drawn in points.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 12
ProHelix: open the element page
Helix
Two strands and 26 rungs, turning.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 13
ProUrchin: open the element page
Urchin
140 spines of different lengths, swaying together.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 14
ProMoth: open the element page
Moth
The butterfly curve filled in 48 rings, wings beating.
- Price
- USD 10, all access
- Built with
- Plain React
Morphology 15
ProMitosis: open the element page
Mitosis
One cell dividing into two, on a loop.
- Price
- USD 10, all access
- Built with
- Plain React
Pricing
- 01
Open an element
It runs live. Change the colours and speed on its page.
- 02
Copy it, or buy it
Free elements are copied from the page. One payment of USD 10 unlocks every pro element.
- 03
Add the file to your project
Install the packages it lists and import it.
- 04
Ask for the next one
All-access members are asked first about what we build next.
Free elements
Copy the code from the page. No account needed.
PriceFree
- Every element marked free
- Full source, MIT licence
- Use in client and commercial work
All access
Every pro element, and every element added in the next year.
PriceUSD 10one-time
- All pro elements, source and assets
- New elements for one year
- Use in unlimited projects
- Requests for new elements are taken from members
FAQ
What you get, what it runs on, what it costs to run and what the licence allows.
01What do I get?
One React component file per element, plus any shader or asset files it needs. Members of a series also get the small engine file they share. Free elements are copied from the page. Pro elements are a download after one payment of USD 10, which unlocks all of them. Each element imports only public packages, which are listed on its page.
02What does it run on?
React 19. The 3D and shader elements use three.js through React Three Fiber. The 2D ones use Framer Motion or plain CSS and canvas. They work in Next.js, Vite, Remix and any other React setup. Framer and Webflow users can embed an element as a code component.
03Can I change the colours and speed?
Yes. Every element exposes its look as props, the same controls shown on its page. Anything beyond the props is yours to edit in the file.
04Can I use these in a deck, a magazine or a film?
Yes. Every element page has a Save frame button that downloads the current frame as a PNG at the size shown. Make the browser window large for a print-size still. For motion, record the page or ask us for a rendered clip. The licence covers web, print, decks and video, for your own work and your clients' work.
05How heavy is it?
The 3D elements mount when they scroll into view and unmount when they leave, so an element off screen costs nothing. The shader backgrounds cost a fraction of a video background. The 2D elements are a few kilobytes.
06What is the licence?
Free elements are MIT. Use them anywhere, including client work. Pro elements are licensed to you for unlimited projects of your own and your clients'. You may not resell or redistribute the source itself.
07Can you make one for us?
Yes. A custom element, such as your product in 3D or a branded shader, is a small project quoted up front. All-access members are asked first about what we build next.