Axiom Studios

A studio that doesn't exist

Axiom Studios is not a company. I invented it so I'd have a brief to design against, and the whole thing is one landing page: a hero, an about block, a contact form, a footer.

Every fact on it is placeholder. "120+ Projects Delivered", "98% Client Satisfaction", "5★ Average Rating" and "4yrs In the Game" are numbers I made up. hello@axiomstudios.com goes nowhere. The X and Instagram handles are dead. Fill in the contact form and press Send and nothing leaves your browser: the handler calls preventDefault, flips the button to "Sent! ✓" on a green gradient, disables it, then resets the form three seconds later.

So this is a visual system, not a business. Judge it on the layout.

One file, no build step

It's a single index.html, about 41 KB, with one style block and one script block. No React, no Tailwind, no bundler, nothing to compile. The only thing it fetches from outside is the fonts. Space Grotesk for the headings, logo and marquee, Sora for everything else.

The palette is six custom properties: pink #f72585, purple #7209b7, blue #3a0ca3, cyan #4cc9f0, orange #fb5607, yellow #ffbe0b, all sitting on a near-black #07070b. Three gradients are composed from them. Pink to purple to blue does the buttons and the logo tile. Pink to yellow to cyan does the shimmering headline words and every accent hairline in the page. The third, cyan to purple, I declared and then never used once. It's still sitting in the variables block.

Sizes are clamp() expressions rather than breakpoint overrides, so the display type runs clamp(2.7rem, 11vw, 8rem) and scales continuously. Two easing curves carry all the motion, and the second one, cubic-bezier(0.34, 1.56, 0.64, 1), overshoots past its endpoint. That overshoot is why the cards feel like they pop rather than slide when you hover them.

Nothing on the page is an image

No photos, no icon set, no logo file. The hero background is four circles. 540, 420, 320 and 260 pixels across. With a 90px blur on them. They share one nine-second float animation but start at delays of 0, -3s, -5s and -2s, so they drift out of phase instead of pulsing in unison.

Over that goes film grain from an SVG feTurbulence filter written inline as a data URI, and a 72px grid of lines at 2.2% white, masked by a radial ellipse so it dissolves toward the edges of the viewport. The logo is a four-pointed star character in a rounded gradient square, rotated -8 degrees, which swings to +8 and grows when you hover it. The six service icons are emoji.

Three things the layout had to get right

The marquee is two identical groups of the same six services, and the track slides from 0 to -50% over 26 seconds. -50% is exactly the boundary between the copies, so at the moment the animation loops the second group is sitting where the first one was and the seam is invisible. Hovering pauses it, which is a mouse-only affordance. There's no hover on a phone.

A clamp()-based display size is a trap on narrow screens, because 11vw of a 360px phone isn't much. The 2.7rem floor is set once globally instead of per breakpoint, which keeps the longest hero line inside the viewport across the whole phone range.

At 540px and below the nav CTA shrinks to 0.78rem rather than disappearing. It's the only persistent route to the form, so dropping it to reclaim the space would have cost more than the space was worth. The floating "New Project" and "Fast Delivery" cards do get hidden below 860px. Those are decoration, and they overhang their container by 1.5rem.

What to look at

Watch "Bold Ideas" in the headline. Its gradient is 220% wider than the text and travels the full width every five seconds, so the colours move through the letterforms rather than the text changing colour.

Scroll slowly. The nav darkens and gains a shadow past 40 pixels. The active link's underline grows in from the left as each section arrives. Each block fades up 34 pixels, once. The IntersectionObserver unobserves the element the moment it fires, so nothing re-animates on the way back up.

Press Tab and every link, field and button takes a 2px cyan ring. Then switch on "reduce motion" in your OS and reload: the orbs dim and stop, the shimmer stops, the marquee stops, the reveals are simply already there, and smooth scrolling turns off.