The work behind the signal.
A story about how I build, and the work it stands on. Everything here is credited as its licence asks; if something of yours is missing or credited wrongly, tell me and I’ll put it right.
01At a glance
- Licensed models
- 02
- Credited and changed as CC BY asks
- Brand marks
- 24
- From Simple Icons, CC0
- Open-source tools
- 22
- The code and the making of it
- Licences
- 08
- CC BY 4.0 · CC0 1.0 · ISC · MIT · Apache 2.0 · Zlib · GSAP Standard · GPL
02Made by
- Concept, design & developmentHashan Athurugiriya
03Third-party models
Used under their licences, with the changes listed.
- M 01
The explorer
Every chapter, from the descent to the overlook
“Animated Floating Astronaut in Space Suit Loop” by LasquetiSpice
- Licence
- CC BY 4.0
- Source
- Sketchfab
- Credit file
- credits.txt
Changes
- Normalised scale
- Reflective visor treatment
- Authored poses and every animation, from the descent to the wave
- Entry heating and suit propulsion
AttributionThis work is based on “Animated Floating Astronaut in Space Suit Loop” (https://sketchfab.com/3d-models/animated-floating-astronaut-in-space-suit-loop-e2c4b146e58141e4b87917456a9970b1) by LasquetiSpice (https://sketchfab.com/LasquetiSpice) licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/).
- M 02
The rover
Shelter, then alongside the explorer to the end
“Rover, Papercraft method test” by Lite
- Licence
- CC BY 4.0
- Source
- Sketchfab
- Credit file
- rover-credits.txt
Changes
- Rock and base removed
- Decimated from about 280k to 28k triangles, and scaled
- Repainted and weathered
- Split into chassis, deck, arms, mast and camera head with joints, and tracks that run
- Beacon rack and status lamps added
AttributionThis work is based on “Rover, Papercraft method test” (https://sketchfab.com/3d-models/rover-papercraft-method-test-063c65d105834cc990a5eed92b58f4de) by Lite (https://sketchfab.com/lite) licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/).
04Icons & marks
Brand names and marks belong to their owners and are shown only to name the tools I use.
- CC0 1.0Simple Icons
The technology marks in Beneath the surface, on the projects and on /about, and the GitHub and Buy Me a Coffee marks in the footers.
Simple Icons contributors
- ISC
- OriginalLinkedIn mark
Simple Icons has no LinkedIn mark, so the footers’ “in” is an original drawing.
Drawn for this site
- React
- Next.js
- TypeScript
- Tailwind CSS
- Laravel
- Django
- Node.js
- MySQL
- MongoDB
- Three.js
- GSAP
- Figma
- Git
- Linux
- Vue.js
- PHP
- JavaScript
- Google Maps
- WordPress
- Express
- PostgreSQL
- CSS
- GitHub
- Buy Me A Coffee
05Original work
Made for this site.
- World
- The plain, the canyon, the valley, the sky with its planet, stars and galaxy, and the weather: generated at run time in Three.js and its shaders.
- Set pieces
- The lander, the camp, the beacons, the dish, the projection vault and the flora, modelled in Blender or built from code.
- Animation & camera
- The descent and every later clip, authored in Blender on the explorer’s skeleton, and the scroll-driven cameras.
- Stills
- The poster frames are renders of the descent. The landscape behind Lite mode is an AI-generated image made for this site.
- Sound
- The ambient hum is synthesised in the browser with the Web Audio API; no recordings are used.
06Software
The open-source work the site is built on, with thanks.
Site
- Next.js
The pages, routing and the contact API
- React
The interface
- Tailwind CSS
Styles, beside hand-written CSS
- Radix UI
Dialogs, tabs and switches
- tw-animate-css
Dialog transitions
- class-variance-authority
Button variants
- clsx
Class names
- tailwind-merge
Class names
- Vercel Web Analytics
Anonymous visit counts
3D
- Three.js
The renderer, scene and shaders
- React Three Fiber
Three.js in React
- Drei
Model loading and helpers
- postprocessing
Bloom, tone mapping and grain
- React Postprocessing
The film finish in React
- Draco
Decoding the compressed models
- meshoptimizer
Packing and unpacking the explorer’s animation
Motion
- GSAP & ScrollTrigger
Scroll position to story progress
- Lenis
Smooth scrolling
Making
- Blender
Modelling, animation and the exports
- glTF Transform
Slimming the explorer’s exports
- TypeScript
The language
- Simple Icons
The marks, exported at build
07Something missing?
If your work is here without credit, or credited wrongly, write to me and I’ll put it right.
Get in touch