Dossier · 01 · Cinematic Aurora

Cinematic Aurora

Premiere, not a portfolio.

A dream studio earns the right to a cinematic opening, so we give it one — a full-bleed WebGL aurora canvas with a drifting frosted-glass dream object, a mouse-reactive bloom that follows the cursor, and a scroll-driven camera dolly that treats every section as a frame in a continuous take. Where Feeldreamy speaks in a single violet voice, the studio speaks in the full aurora spectrum — teal, pink, violet, cream — because the parent brand must contain its child, not duplicate it. Restraint here is structural; expression is chromatic and motion-led.

Direction 02 Dark only WebGL · R3F · GLSL
Dossier · 02 / 09 · Voice & Tone

A film premiere, then a director's note.

Six voice principles. They govern every line of copy, every section break, every silence. Cinematic ambition is permission to be spare.

Tone 01

Open like a film premiere, settle like a director's note.

The first frame swings wide — display-cinema typography, full-bleed canvas, an audible exhale. The second frame is intimate copy. Both registers belong to the same film.

Color 02

Spectrum, never single hue.

Feeldreamy speaks in one violet voice. The studio speaks in the full aurora — teal, violet, pink, cream. The parent contains the child; it never repeats it.

Cadence 03

Sentence cadence matches scene pacing — long, then sharp.

Long opening clauses set the scene. Short follow-ups land the cut. Every paragraph is a take.

Restraint 04

Restrain structure. Express in motion and chroma.

One hero per page. Very few CTAs. Generous letterboxing. We earn the right to be cinematic by being quiet between the takes.

Authority 05

Cinema first, product second.

We open with intent. The frame is the proof. Anything that does not earn the next second is cut from the assembly.

Authenticity 06

Research before build. Sell the concept first.

We validate the problem and earn demand on the story before a line of code is written. Time spent on the wrong thing is the real cost — cinematic ambition is permission to overshoot, not to bluff.

Dossier · 03 / 09 · Color System — The Spectrum

Five stops over a deep cosmic floor.

A 5-stop chromatic gradient over a 2-stop neutral base. Aurora hues are luminous — high chroma, mid-high lightness — and only ever appear as light against deep surface, never as flat fills. Neutrals carry text and chrome.

Hero composite

--gradient-aurora

Conic 210deg · teal → violet → pink → cream. The signature spectrum, used in micro at every aurora-text accent and at scale in the hero shader.

Cosmos surfaces

--surface-void oklch(0.04 0.02 280) ~ #040308 Page floor, footer base, modal scrim
--surface-cosmos oklch(0.08 0.04 280) ~ #0a0814 Default body background, hero base color
--surface-deep oklch(0.12 0.045 285) ~ #13101f Cards, frames, the browser-chrome mockup body
--surface-raised oklch(0.16 0.05 288) ~ #1a1626 Elevated surfaces, header chrome, raised cards
--surface-edge oklch(0.22 0.06 290) ~ #241e35 Borders, hairline dividers, timeline rails

Luminous ink

--ink-luminous oklch(0.98 0.01 80) ~ #f9f5ee Primary headlines, body emphasis, cream-tinted white vs cosmos: 17.4 : 1
--ink-soft oklch(0.86 0.02 80) ~ #dad1c4 Body copy, sublines, descriptive prose vs cosmos: 13.2 : 1
--ink-muted oklch(0.66 0.03 280) ~ #9690a6 Mono labels, captions, tertiary text vs cosmos: 7.1 : 1
--ink-faint oklch(0.48 0.04 280) ~ #5e576f Placeholders, disabled state, deep meta vs cosmos: 3.6 : 1

Aurora spectrum

--aurora-teal oklch(0.78 0.14 200) ~ #5fbfc9 Aurora stop 1 — the cold edge of the spectrum
--aurora-cyan oklch(0.82 0.13 210) ~ #6bcad4 Aurora stop 1.5 — shader interpolation point
--aurora-violet oklch(0.62 0.20 290) ~ #9b6cdc Aurora stop 2 — the dream object's primary tone
--aurora-pink oklch(0.74 0.18 350) ~ #e29fc1 Aurora stop 3 — the warm bloom in the spectrum
--aurora-cream oklch(0.95 0.05 75) ~ #f5ead3 Aurora stop 4 — the highlight, also focus-ring color
--aurora-deep-violet oklch(0.40 0.18 290) ~ #5d3eb2 Aurora shadow, shader low, deep gradient anchor

Bloom, glow, focus, functional

--bloom oklch(0.88 0.16 200 / 0.55) ~ #7adaef8c Mouse-cursor bloom centre
--bloom-soft oklch(0.74 0.18 350 / 0.18) ~ #e29fc12e Mouse-cursor bloom edge
--focus-ring oklch(0.95 0.05 75) ~ #f5ead3 Cream — focus visibility on cosmos
--success oklch(0.78 0.15 155) ~ #6fcc8c Confirmation, ship-event status
--warning oklch(0.80 0.14 75) ~ #d9b86b Caution, in-flight indicator
--danger oklch(0.66 0.22 25) ~ #d65b48 Destructive action, hard stop
Dossier · 04 / 09 · Typography

Three voices, one rulebook.

Space Grotesk for display — a narrow, cooler grotesque visually distinct from Feeldreamy's Sora. Inter for body. JetBrains Mono for labels and shader notes. All variable, only the wght axis used.

display-cinema Hero h1 — once per page
Font
Space Grotesk · 500
Size
4.5rem (72px) → 9rem (144px)
Fluid
clamp(4.5rem, 4rem + 6vw, 9rem)
Line
0.92
Track
-0.04em
Dreamchasers
display-xl Page h1 on secondary pages
Font
Space Grotesk · 500
Size
3rem (48px) → 5.5rem (88px)
Fluid
clamp(3rem, 2.5rem + 3vw, 5.5rem)
Line
0.96
Track
-0.035em
Dreamchasers
display-lg Section h2
Font
Space Grotesk · 500
Size
2.25rem (36px) → 3.5rem (56px)
Fluid
clamp(2.25rem, 1.9rem + 2vw, 3.5rem)
Line
1.04
Track
-0.03em
Dreamchasers
heading-md Subsection h3
Font
Space Grotesk · 500
Size
1.5rem (24px) → 2rem (32px)
Fluid
clamp(1.5rem, 1.3rem + 1vw, 2rem)
Line
1.18
Track
-0.02em
Dreamchasers
heading-sm Card titles, h4
Font
Space Grotesk · 500
Size
1.25rem (20px) → 1.5rem (24px)
Fluid
clamp(1.25rem, 1.2rem + 0.3vw, 1.5rem)
Line
1.25
Track
-0.01em
Dreamchasers
body-lg Lede, pull quote
Font
Inter · 400
Size
1.25rem (20px) → 1.5rem (24px)
Fluid
clamp(1.25rem, 1.2rem + 0.3vw, 1.5rem)
Line
1.55
Track
-0.005em
Dreamchasers
body Default paragraph
Font
Inter · 400
Size
1.0625rem (17px) → 1.0625rem (17px)
Fluid
static
Line
1.62
Track
0
Dreamchasers
body-sm Card body, caption
Font
Inter · 400
Size
0.9375rem (15px) → 0.9375rem (15px)
Fluid
static
Line
1.55
Track
0
Dreamchasers
label All-caps section label
Font
JetBrains Mono · 500
Size
0.75rem (12px) → 0.75rem (12px)
Fluid
static
Line
1.0
Track
+0.18em
Cinematic aurora · Vilnius · 2026
caption Footnote, meta line
Font
Inter · 400
Size
0.75rem (12px) → 0.75rem (12px)
Fluid
static
Line
1.4
Track
+0.02em
Cinematic aurora · Vilnius · 2026

Hierarchy rules

  1. Exactly one display-cinema per page — the hero <h1>.
  2. Section labels are mono, all-caps, +0.18em tracking — e.g. STUDIO · 01 / 05.
  3. No italics anywhere. Emphasis is via aurora-gradient text or weight 500.
  4. We never go heavier than 500 — cinematic register prefers air over weight.
  5. Numerals: font-feature-settings: 'tnum' 1 wherever they appear in tabular context.
  6. Lithuanian copy uses identical scale — Space Grotesk's latin-ext covers all required diacritics.
Dossier · 05 / 09 · Motion System

Eleven primitives. One pacing.

All curves are cubic-beziers — no springs in CSS. Springs only inside R3F via lerp. Every primitive declares its property contract, duration, and curve. Hover any cell to retrigger the demo.

m-aurora-drift 28s

Background shader hue rotation, infinite

Curve
linear
Property
shader uniform uTime
m-bloom-follow 280ms (lag)

Cursor bloom translate

Curve
cubic-bezier(0.16, 1, 0.3, 1)
Property
transform: translate3d, lerp 0.12
m-dolly-zoom scroll-tied

Section dolly on scroll

Curve
linear
Property
camera.position.z, camera.fov
m-lens-flare-sweep 1100ms

Section divider sweep

Curve
cubic-bezier(0.65, 0, 0.35, 1)
Property
translateX, opacity
m-particle-disperse 1400ms

Dream object dissolve into points

Curve
cubic-bezier(0.83, 0, 0.17, 1)
Property
geometry attributes
m-fade-rise 720ms

Element enters viewport

Curve
cubic-bezier(0.22, 1, 0.36, 1)
Property
opacity, translateY 24px to 0
m-aurora-text 6s loop

Aurora-gradient text shimmer

Curve
ease-in-out
Property
background-position 0% to 200%
m-glass-lift 220ms

Card hover

Curve
cubic-bezier(0.2, 0.8, 0.2, 1)
Property
translateY -4px, shadow bloom
m-pulse-orb 4.4s loop

Idle dream-object breath

Curve
ease-in-out
Property
scale 1.0 to 1.04
m-press 90ms

Button press

Curve
cubic-bezier(0.4, 0, 1, 1)
Property
scale 1 to 0.97
m-page-transition 540ms

View Transitions API

Curve
cubic-bezier(0.65, 0, 0.35, 1)
Property
opacity, translateY 10vh
Device tier strategy

High → Mid → Low → Fallback

Target FPS
60
DPR
1.75
Postprocess
Bloom + CA + Vignette
Notes
M1+/M2/M3, RTX desktops, iPhone 13+
Target FPS
45–60
DPR
1.25
Postprocess
Bloom only
Notes
Snapdragon 7-series, M-iPad, iPhone 11–12
Target FPS
30
DPR
1.0
Postprocess
None
Notes
Older Android, iPhone XR — shader only
Target FPS
static
DPR
n/a
Postprocess
n/a
Notes
Reduced-motion OR no WebGL2 OR SSR

Runtime adjustment via drei's <PerformanceMonitor>: sustained FPS below 40 fires onDecline and the tier downshifts — effects are removed in order.

Reduced motion

Static gradient orb fallback

When prefers-reduced-motion: reduce matches, the hero canvas is never mounted. The bloom cursor is disabled. Aurora text shimmer falls to a static gradient. Lens flare sweeps become 60ms cross-fades. Particle disperse is replaced by a 180ms opacity swap.

Dossier · 06 / 09 · Component Library

Every part, in its own room.

Every Aurora component, rendered live. File paths and one-line roles included. The full inventory is the assembly.

Layout

Frame · letterbox 16:9

Cinematic letterbox

A full-bleed, rounded, glass-bordered container — the "press kit" frame.

Frame src/components/aurora/Frame.astro

Optional letterbox prop locks a 16:9 ratio. Surface-deep fill, surface-edge hairline.

Section · default

A Section gives every block its vertical rhythm: padding-block clamps to 5rem → 12vh → 9rem by default, with optional compact or loose variants.

Section src/components/aurora/Section.astro

Width: narrow (64rem) · default (80rem) · wide (96rem) · full. Spacing: compact, default, loose.

LensFlareDivider src/components/aurora/LensFlareDivider.astro

Scroll-driven sweep via animation-timeline: view(). Falls back to a static gradient line under reduced motion.

AuroraStreak src/components/aurora/AuroraStreak.astro

A softer, infinite-shimmer alternative to LensFlareDivider. Used between sub-sections.

Primitives

Default · Vilnius Outline · Beta Glow · MB · 2026
Pill src/components/aurora/Pill.astro

Mono uppercase tag. Tones: default, outline, glow (cream text over surface-deep with violet ring).

Cinema CTA Ghost CTA Link CTA
Button src/components/aurora/Button.astro

Three variants. Cinema: violet→pink gradient with bloom hover. Ghost: hairline border, brightens to cream. Link: aurora underline grows on focus.

Hover me

A glass card lifts 4px, gains a violet ring, and casts a soft bloom shadow.

Card src/components/aurora/Card.astro

Glass card primitive. Surface-deep at 80% with backdrop-blur. Polymorphic article / div / a.

8
Step funnel
7
Reflection sections
Beta
Status
Stat src/components/aurora/Stat.astro

Large display numeral over a mono label. Optional accent flips the value to aurora gradient.

Content

Danielius Šalavka
Founder · CEO · Vilnius

Danielius Šalavka

Tele2's longest-running on-screen face since 2015, ISM entrepreneurship student, freelance videographer behind BALTPIX and Finansiškai Raštingi. He builds the story Dreamchasers tells the world.

PhotographyVideo ProductionActingForeign Languages
Read profile
FounderCard src/components/aurora/FounderCard.astro

Portrait + outline pill + essence + chip row + read link. Hover lifts and warms the bloom shadow with aurora-pink.

feeldreamy.com
FEELDREAMY / READING
READING · 07 / 08
The Pattern
A recurring motif of falling, returning over the last 14 nights. Stress signature, not prophecy.
Product 01

FeeldreamyLens

Your dream means more than you think.

An AI dream-analysis SaaS. Tell it the dream; get an eight-step reflection — emotional architecture, recurring symbols, moon phase, and a question to sit with. It's grounded, not predictive.

8
Step funnel
7
Reflection sections
Beta
Status
Explore Feeldreamy
ProductShowcase + BrowserChromeMockup src/components/aurora/ProductShowcase.astro

A 2-col product callout. Browser mockup at left, copy + stats + CTA at right. Mockup body uses a violet radial wash over cosmos.

  1. 2025 → now
    Freelance Videographer/Photographer
    BALTPIX (Vilnius)
  2. 2024 → now
    Freelance Videographer
    UAB Finansiškai Raštingi
  3. 2015 → now
    Contract Actor
    Tele2
    Ten-plus years of on-screen consistency.
TimelineItem src/components/aurora/TimelineItem.astro

A row in a vertical timeline. Dot, mono period, role, org, optional context. current glows the dot with the aurora gradient.

Passionate about innovation and business. Love sitting on crypto and stocks charts. Capturing moments with camera.
Danielius Šalavka LinkedIn bio, 2025
PullQuote src/components/aurora/PullQuote.astro

Editorial pull quote. Aurora-gradient quote mark anchored top-left, display body, mono source line.

Email hello@dreamchasers.lt
LinkedIn
Danielius Rokas
Legal

Dreamchasers, MB · Vilnius, Lietuva · 2026

ContactBlock src/components/aurora/ContactBlock.astro

Email row, LinkedIn duo, legal block. Aurora-gradient underline grows on hover for every link.

Hero & WebGL pieces

HeroSceneIsland src/components/aurora/hero/HeroSceneIsland.tsx

The R3F canvas. Owns scroll-progress, pointer tracking, tier detection, and the fallback gate. Hydrated client:visible. See the live cover at the top of this dossier — that is the component.

BloomCursor src/components/aurora/hero/BloomCursor.tsx

DOM-overlay lens bloom. Hydrated client:idle. Active everywhere on this brandbook — move your cursor to see the soft cyan→pink halo follow you (disabled under reduced motion or touch).

aurora.glsl.ts src/components/aurora/hero/shaders/aurora.glsl.ts

Vertex + fragment shaders shipped as TS modules so they minify with the island bundle. ~140 lines including Ashima Arts simplex noise.

Dossier · 07 / 09 · Signature Moment — WebGL Hero

The first frame is the proof.

A full-bleed canvas occupies the hero. A custom fragment shader paints aurora ribbons over a cosmic floor. A frosted-glass icosahedron breathes at the centre. The cursor adds a bloom centre to the shader. As the user scrolls, the camera dollies forward and the dream object dissolves into the next section. Below: the same scene rendered at half-viewport in a controlled environment.

01

GLSL aurora shader

A fullscreen quad. fBm noise drives the hue mix between teal → violet → pink → cream. uMouse adds a soft bloom centre, uMouseStrength attenuates it. Hue uniforms are pre-computed once from the OKLCH tokens.

02

R3F Float scene

A single rounded icosahedron wrapped in drei's <Float>. <MeshTransmissionMaterial> gives the frosted glass: transmission 1, thickness 0.9, IOR 1.4, chromatic aberration 0.08, backside on.

03

Scroll-driven dolly

A DollyRig lerps camera z from 5.0 to 1.4 and FOV from 38 to 52 across the first 100svh. After hero exit, the scene unmounts via IntersectionObserver — GPU returns to idle.

04

Performance budget

Bundle: ~256 KB gzipped for the entire hero island (three.js dominates). Outside the hero, the site ships ~14 KB of motion. The cost is honest and we own it.

Shader uniforms — JS handoff

Six tokens, one fragment shader.

// HeroSceneIsland.tsx — uniform handoff
const uniforms = useMemo(() => ({
  uTime: { value: 0 },
  uResolution: { value: new THREE.Vector2(width, height) },
  uMouse: { value: new THREE.Vector2(0.5, 0.5) },
  uMouseStrength: { value: 0.6 },
  uHueA: { value: HUE_A.clone() }, // aurora-teal
  uHueB: { value: HUE_B.clone() }, // aurora-violet
  uHueC: { value: HUE_C.clone() }, // aurora-pink
  uHueD: { value: HUE_D.clone() }, // aurora-cream
  uCosmos: { value: COSMOS.clone() }, // surface-cosmos
}), []);
aurora.glsl.ts — fragment core

fBm, hue mix, bloom highlight.

// aurora.glsl.ts — fragment core
vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y;
vec3 p = vec3(uv * 1.2, uTime * 0.06);
float n1 = fbm(p + vec3(0.0, 0.0,  uTime * 0.08));
float n2 = fbm(p + vec3(2.7, 5.1, -uTime * 0.05));

vec2 mPos = (uMouse - 0.5) * vec2(uResolution.x / uResolution.y, 1.0);
float md = distance(uv, mPos);
float bloom = exp(-md * 4.0) * uMouseStrength;

float t = smoothstep(-0.5, 0.5, n1 + bloom * 0.6);
vec3 ab = mix(uHueA, uHueB, t);
vec3 cd = mix(uHueC, uHueD, smoothstep(-0.4, 0.6, n2));
vec3 col = mix(ab, cd, smoothstep(-0.2, 0.4, n1 - n2));
col += vec3(0.78, 0.74, 0.95) * bloom * 0.7;
gl_FragColor = vec4(col, 1.0);
Fallback strategy

Three nested fallbacks, in order.

  1. Reduced motion / no WebGL2 / SSR — a pure-CSS hero: static aurora conic-gradient layered with a pre-rendered orb. No JS island ever runs.
  2. Hero off-screen — IntersectionObserver unmounts the <Canvas> below 5% intersection. A snapshot AVIF takes over as a fixed background.
  3. Low-tier device — scene renders without postprocessing; chromatic aberration is halved; distortion drops to 0; DPR clamped to 1.0; particles disabled.
Dossier · 08 / 09 · Spacing, Layout, Breakpoints

Letterbox over grid.

The Aurora layout is editorial-first: narrow columns for prose, wide stages for product showcases. Cinematic frame proportions reference 16:9; container caps engage at the wide breakpoint.

Spacing scale

section-compact clamp(3rem, 6vh, 5rem)

Tight section padding (block)

section-default clamp(5rem, 12vh, 9rem)

Standard section padding (block)

section-loose clamp(7rem, 16vh, 12rem)

Hero / dossier section padding (block)

container-narrow max-w 64rem (1024px)

Editorial copy column

container-default max-w 80rem (1280px)

Default page width

container-wide max-w 96rem (1536px)

Hero, showcase, wide content

radius-card 22px

Glass cards, frames

radius-pill 999px

Pills, buttons, contact links

gap-section clamp(1.75rem, 3vw, 2.5rem)

Inner section gap

Breakpoints

sm ≥ 600px

Small phones to phablets — first grid breaks

md ≥ 760px

Tablets — header nav appears, founder grid 2-col

lg ≥ 960px

Small laptops — ProductShowcase becomes 2-col

xl ≥ 1280px

Default desktop — container caps engage

2xl ≥ 1536px

Cinema — wide container reveals

Cinematic frame proportions

16 : 9 · letterbox

Hero / showcase

The "frame" of the press kit. Always full-bleed within its column.

Layer 1 — shader Layer 2 — dream object Layer 3 — DOM overlay
Dossier · 09 / 09 · Accessibility

Cinema, but visible to everyone.

The cinematic register is opt-in. Every animation has a reduced-motion path, every spectrum hue has a verified contrast pair, and every interactive element has a cream focus ring on cosmos that passes 3:1 non-text AAA.

Contrast pairs (vs dark canvas)

--ink-luminous on --surface-cosmos 17.4 : 1 AAA — all sizes
--ink-soft on --surface-cosmos 13.2 : 1 AAA — all sizes
--ink-muted on --surface-cosmos 7.1 : 1 AAA normal / AAA large
--ink-faint on --surface-cosmos 3.6 : 1 AA large only
--aurora-cream on --surface-cosmos 16.1 : 1 AAA — hero, focus ring
--aurora-teal on --surface-cosmos 9.8 : 1 AAA — body-size safe
--aurora-pink on --surface-cosmos 8.4 : 1 AAA — body-size safe
--aurora-violet on --surface-cosmos 5.1 : 1 AA normal — headlines only
--ink-luminous on --surface-raised 13.9 : 1 AAA — card bodies
--aurora-cream on --surface-void 20.1 : 1 AAA — footer hero
Focus styles

Cream ring on cosmos.

Every focusable element shows 2px solid var(--focus-ring) at 4px offset. The cream value passes 16.1 : 1 against cosmos — 3 : 1 non-text AAA, visibility guaranteed.

Reduced motion

Belt and braces.

  • Hero WebGL canvas is never mounted.
  • Bloom cursor returns null on mount.
  • Aurora text shimmer falls to static gradient.
  • Lens flare sweeps become 60ms cross-fades.
  • View Transitions retain only the cross-fade.
Keyboard

Every section reachable by Tab.

  • Skip link first-focusable, visible on focus.
  • Header nav is a real <nav> <ul>.
  • Direction switcher trapped focus, Escape closes.
  • FAQ accordion uses WAI-ARIA disclosure pattern.
Landmarks

Real DOM, every time.

The hero <h1> is real DOM, never inside the canvas. Three.js holds visuals; semantics live in the overlay. <main>, <header>, <footer>, <nav> are all used as documented.

End of dossier.

The brandbook is canon. Components ship from this page; tokens come from aurora.css; copy is signed off by the studio. For the long-form documentation, head to the markdown source.

Back to Aurora Markdown source hello@dreamchasers.lt