AI agency · Dark

Spark

A hero in an ember-red card over off-white paper that rotates 90° and becomes a 3D ring of cards, followed by a plunge into black where a spark explodes into a particle portal — warm, cinematic tech and not at all blue.

Palette

--paper#FBFBF9
initial background, frame around the hero card
--bg#0A0909
background of the dark sections (portal, cases, gallery)
--ember-dark#2E1E1E
top of the card gradient
--ember#7A2B23
middle of the red gradient
--accent#E8452A
vivid red-orange, spark, marquee markers
--glow#FEA077
peach glow at the base of the gradients
--text#F7F3F0
titles on dark
--text-2#9E8C89
second line of titles, supporting text

Typography

Display: medium (500) neo grotesque, normal case, tracking -0.03em; titles on 2 lines with the second in a faded tone; hero clamp(40px, 5vw, 72px); giant loose word in the portal up to 10vw — suggestions: Inter Tight 500 / Satoshi Medium (Fontshare)
Body: same family 400, 13–14px, line-height 1.55
Support/labels: 10–11px in a "Client · Year · Service" line with wide separators over case cards
Treatments: second line of the title in a lowered color (--text-2 or white at 55%); marquee of giant phrases separated by a 4-point star; single enormous word split between two corners of the screen

Sections

Intro — off-white background, black 4-point star + name that writes itself with motion blur.
Nav — floating pill bar centered at the top: logo, 5 links separated by dividers, last item black as the CTA.
Hero — rounded red card filling the screen with a 24px margin; 2-line title at the top left, vertical photo at the center right, text and 2 buttons at the bottom left, social proof with avatars and a phrase aligned right at the bottom of the card.
Rotating card — the card shrinks into a portrait, rotates in perspective and becomes one item among others, with a marquee of giant phrases running behind it.
Ring of cards (pin) — service cards arranged in a 3D ring spinning around the Y axis, each with a dark photo, label and 2-line title; black button below.
Portal — black background, white spark in the center grows into a disc of particles and opens a tunnel; giant word split between the top-left and bottom-right corners with a small paragraph.
Cases — horizontal row of tall red cards with a duotone photo, large name at the bottom and a small metric on the right; thin case strips at the bottom.
Floating gallery — 2-line title and thumbnails of campaigns scattered in depth that pass by the camera; a 3D chrome shape crosses through.
Final CTA — new large red card with a 2-line title, paragraph, white button and the chrome shape entering from the right.
Footer — single line: star + name, short description, black button.

Motion and interaction

Intro: load → name enters with horizontal motion blur (filter blur 12px→0 and x -40px→0), 0.9s, then the paper recedes and the card rises.
Card → ring: scroll scrub with pin → the hero card shrinks from 100% to ~32vw, rotateY 0→90°, and is replaced by the ring; GSAP ScrollTrigger + CSS 3D (perspective) or Three.js.
3D ring: scroll scrub → ring of 6–8 cards (radius ~520px) rotates on Y with progress; Three.js with textured planes or CSS preserve-3d.
Marquee: continuous → strip of phrases at 40px/s behind the card, direction follows the scroll direction.
Particle portal: scroll scrub → spark (sprite) scales, becomes a disc of ~30k particles in a ShaderMaterial that opens into a ring/tunnel; Three.js + GLSL.
Split word: scroll → half the phrase in the top-left corner and half in the bottom-right, entering from opposite directions.
Gallery in depth: scroll scrub → thumbnails positioned in Z from -2000 to 0 advance toward the camera.
Chrome shape: scroll → twisted metallic object (Three.js, MeshPhysicalMaterial metalness 1) rotates slowly and crosses the last two sections.

Components

Pill nav: white background, 1px #E5E2DE border, 10px radius, 12px items with 1px dividers, final CTA in black.
Primary button: white rectangle 6px radius, dark 13px text, 36px height.
Ghost button: white 10% background, --line border, light text.
Service card: 3:4 portrait, 18px radius, dark red-duotone photo, 10px pill label at the top, 22px title on 2 lines at the bottom.
Case card: red with a duotone photo, 10px metadata line at the top, 28px name and 11px metric at the base.
Marquee marker: 14px 4-point star in --accent.
Social proof: stack of 5 overlapping 28px avatars + 11px text inside a translucent pill.