Depth
Perspective and shadow that agree with each other, so the lift reads as physical.
LittleMan Dev · Walkthrough
This page is the portfolio.
Nothing here is a video, a mockup or a screenshot of somebody else's work. Every effect below is running in your browser right now, and you are flying a camera through it. Scroll, and I'll show you exactly what goes into a product I build, and what you get to keep at the end.
01 · Motion
Timing is a decision, not a default.
Most sites animate with whatever the framework shipped with. The difference between a product that feels expensive and one that feels generic is usually forty milliseconds and the shape of a curve.
Press replay and watch the three dots. Same distance, same duration, only the easing differs. The third is the curve this whole site is built on.
linear
mechanical
ease-in-out
safe, a little dull
the house curve
arrives, then settles
cubic-bezier(.16, 1, .3, 1). Fast out of the gate, long settle.
What you get
A motion spec: every transition in your product has a named duration and curve, applied consistently, and a reason for existing: feedback, continuity, or attention. Never "because it could move".
02 · Pointer
The pointer is part of the interface.
The arrow you're moving right now is the LittleMan mark, with a ring that lags behind it and swells over anything you can touch. It costs nothing and it tells you, continuously, what the page thinks you can do.
The buttons on the right are magnetic. They reach for the cursor as it gets close, then let go. Try passing over them slowly.
- x
- 0
- y
- 0
- state
- idle
Live pointer state, the same values that drive the ring.
What you get
Hover, focus, active, disabled and loading states designed for every interactive element, including keyboard focus, which is the one almost everybody skips.
03 · Depth
Real 3D, when it earns its place.
The geometry flying past you is WebGL: an actual camera moving through an actual scene, recycling objects behind you so the corridor never ends. The panels are DOM, on a CSS 3D stage, sharing the same sense of space.
It is also under budget. Three.js loads after the page is interactive, and if it fails to load, or you asked for reduced motion, the page is still a perfectly readable document.
60
frames / second
- objects in scene
- ·
- motes
- ·
- renderer
- ·
- three.js
- loaded after paint
Measured live, on your machine, right now.
What you get
3D only where it does a job: a product you can turn, a map, a sense of depth behind a story. Never a spinning cube that costs four seconds of load time and says nothing.
04 · Surfaces
Things you can almost pick up.
Light, shadow and a little perspective are what separate a card from a rectangle. Move your cursor across these. Each one tilts toward you, catches a highlight where the pointer is, and lifts off the page.
Light
A highlight that tracks the pointer, because a flat sheen is worse than none.
Weight
Motion that decelerates like mass. Nothing in the real world stops instantly.
What you get
A component library where every surface (cards, dialogs, menus, sheets) shares one elevation scale, so the interface has a consistent physics instead of a pile of one-off shadows.
05 · States
The states everyone forgets.
A design that only covers the happy path is half a design. What does it look like while it is thinking? When the network dies? When the list is empty because the user is brand new?
Press the button. Then press it again. The second attempt fails on purpose, because that is the state that actually needs designing.
Nothing here yet. This is the empty state.
- idle
- loading
- success
- error
- empty
What you get
Every screen specified in all of its states (loading, empty, error, partial, offline and success) before a line of code is written. That document is what stops a build from stalling halfway.
06 · Type
A type system, not a font choice.
Display / 700Built properly
Section / 600Built properly
Lede / 300Built properly, at every size
Body / 400Built properly, at every size, on every screen.
Mono / 500const scale = 1.25;
Three families, one scale, fixed line lengths. Headings are Space Grotesk, body is Inter, anything technical is JetBrains Mono, and every size on the page is a step on the same ratio rather than a number somebody typed.
- Measure capped at 68 characters, because longer lines lose the reader between rows.
- Scale fluid with the viewport, so a phone is not just a squeezed desktop.
- Contrast checked against WCAG AA in both themes, not eyeballed.
What you get
A type scale in your design tokens and in your CSS, so "make this heading bigger" has a correct answer instead of an argument.
07 · Every screen
One design. Every screen.
Not a desktop layout that survives a phone, but three separate compositions of the same content, each built for the way that screen is actually held. Drag the handle to watch the layout re-think itself.
1280px · desktop
What you get
Designs and a build tested at real widths on real devices, including the 390px phone that most of your Maldivian visitors are actually holding.
08 · The handover
What you actually receive.
The demo above is the craft. This is the paperwork, the part that decides whether you still own your product in two years.
The specification
Problem, users, scope, data model, screen-by-screen states. Written before the build, and the thing we both point at when something is in dispute.
The design
Every screen, every state, in both themes, at three widths, with the tokens (colour, type, spacing, elevation) that generated them.
The code
Readable, commented, in a git repository you own, with the commit history intact. No minified handover, no "I'll send a zip".
The keys
Domain, hosting, database, analytics and any third-party account, transferred to your name, with a written record of what each one costs.
The manual
How to run it, how to deploy it, how to edit the content, and what to do when something breaks, written for a person, not a developer.
A person
Me. The same number and inbox you used before the project started, still answered by the one who wrote the code.
Ready when you are
Tell me what's broken, or what you want built.
The fastest route is the chat. It puts you straight through to me, and I usually reply the same day.
- Call or WhatsApp
- 797 5770
- Secondary
- dotcomscript@gmail.com
- Based
- Malé, Maldives