Dosjė · 01 · Cinematic Aurora

Cinematic Aurora

Premjera, ne portfolio.

Sapnų studija užsidirba teisę į kinematografinę pradžią — todėl jai ją ir suteikiame: pilnos drobės WebGL aurora, lėtai sukantis ledinio stiklo sapno objektas, pelės reaguojantis žiedas ir slinkties valdoma kamera, kuri kiekvieną sekciją traktuoja kaip kadrą vienoje ištisinėje takelyje. Kai Feeldreamy kalba viena violetine kalba, studija kalba visu auroros spektru — tirkizinė, rožinė, violetinė, kreminė — nes tėvinis ženklas privalo talpinti vaiką, o ne jį dubliuoti. Santūrumas čia yra struktūrinis; raiška — chromatinė ir judesio vedama.

Kryptis 02 Tik tamsus WebGL · R3F · GLSL
Dosjė · 02 / 09 · Balsas ir Tonas

Filmo premjera, paskui režisieriaus pastaba.

Šeši balso principai. Jie valdo kiekvieną teksto eilutę, kiekvieną sekcijos lūžį, kiekvieną tylą. Kinematografinis užmojis — leidimas būti taupiems.

Tonas 01

Atsiverk kaip filmo premjera, nusėsk kaip režisieriaus pastaba.

Pirmas kadras paleidžia plačiai — display-cinema tipografija, pilna drobė, girdimas iškvėpimas. Antras kadras — intymus tekstas. Abu registrai priklauso tam pačiam filmui.

Spalva 02

Spektras, niekada — viena spalva.

Feeldreamy kalba viena violetine kalba. Studija kalba visu auroros spektru — tirkizinė, violetinė, rožinė, kreminė. Tėvas talpina vaiką, o ne kartoja jį.

Ritmas 03

Sakinio ritmas atitinka scenos tempą — ilgas, paskui aštrus.

Ilgos pradinės sakinio dalys nustato sceną. Trumpi atsakymai užfiksuoja pjūvį. Kiekviena pastraipa — vienas kadras.

Santūrumas 04

Riboti struktūrą. Reikštis judesiu ir spalva.

Vienas hero kiekviename puslapyje. Labai mažai CTA. Dosnus letterbox. Į kinematografišką registrą uždirbame tylėdami tarp kadrų.

Autoritetas 05

Kinas pirmiau už produktą.

Pradedame su intencija. Kadras — įrodymas. Tai, kas neuždirba kitos sekundės, iškerpama iš montažo.

Tikrumas 06

Pirma tyrimas. Pirma — koncepcija.

Problemą patvirtiname ir paklausą uždirbame iš istorijos dar prieš parašant pirmąją kodo eilutę. Laikas, sugaištas ne tam dalykui, — tikroji kaina. Kinematografinis užmojis — leidimas pataikyti aukščiau, ne blefuoti.

Dosjė · 03 / 09 · Spalvų Sistema — Spektras

Penkios stotelės virš gilios kosminės grindies.

5 stotelių chromatinis gradientas ant 2 stotelių neutralios bazės. Auroros spalvos yra šviesinės — aukšta chroma, vidutiniškai aukštas šviesumas — ir niekada nepasirodo kaip plokščios užpildos, tik kaip šviesa prieš tamsų paviršių. Neutralumai neša tekstą ir chromą.

Hero kompozitas

--gradient-aurora

Konic 210deg · tirkizinė → violetinė → rožinė → kreminė. Parašo spektras, naudojamas mikro masteliu kiekviename aurora-text akcentas ir didžiuliu masteliu hero šaderyje.

Kosmoso paviršiai

--surface-void oklch(0.04 0.02 280) ~ #040308 Puslapio grindis, footerio bazė, modal apdanga
--surface-cosmos oklch(0.08 0.04 280) ~ #0a0814 Numatytasis kūno fonas, hero bazinė spalva
--surface-deep oklch(0.12 0.045 285) ~ #13101f Kortelės, rėmai, naršyklės karkasas
--surface-raised oklch(0.16 0.05 288) ~ #1a1626 Pakelti paviršiai, headerio chromas
--surface-edge oklch(0.22 0.06 290) ~ #241e35 Kraštai, plonos linijos, timeline bėgiai

Šviesinis rašalas

--ink-luminous oklch(0.98 0.01 80) ~ #f9f5ee Pirminės antraštės, kreminis baltas prieš kosmosą: 17,4 : 1
--ink-soft oklch(0.86 0.02 80) ~ #dad1c4 Kūno tekstas, paantraštės prieš kosmosą: 13,2 : 1
--ink-muted oklch(0.66 0.03 280) ~ #9690a6 Mono etiketės, paantraštės prieš kosmosą: 7,1 : 1
--ink-faint oklch(0.48 0.04 280) ~ #5e576f Pakaitalai, neaktyvi būsena prieš kosmosą: 3,6 : 1

Auroros spektras

--aurora-teal oklch(0.78 0.14 200) ~ #5fbfc9 Auroros 1 stotelė — šaltas spektro kraštas
--aurora-cyan oklch(0.82 0.13 210) ~ #6bcad4 Auroros 1.5 stotelė — šaderio interpoliacija
--aurora-violet oklch(0.62 0.20 290) ~ #9b6cdc Auroros 2 stotelė — pagrindinis sapno objekto tonas
--aurora-pink oklch(0.74 0.18 350) ~ #e29fc1 Auroros 3 stotelė — šiltas spektro žybsnis
--aurora-cream oklch(0.95 0.05 75) ~ #f5ead3 Auroros 4 stotelė — pabrėžimas, fokuso žiedas
--aurora-deep-violet oklch(0.40 0.18 290) ~ #5d3eb2 Auroros šešėlis, šaderio dugnas

Žiedas, švytėjimas, fokusas, funkcija

--bloom oklch(0.88 0.16 200 / 0.55) ~ #7adaef8c Pelės žiedo centras
--bloom-soft oklch(0.74 0.18 350 / 0.18) ~ #e29fc12e Pelės žiedo kraštas
--focus-ring oklch(0.95 0.05 75) ~ #f5ead3 Kreminė — fokuso matomumas ant kosmoso
--success oklch(0.78 0.15 155) ~ #6fcc8c Patvirtinimas, leidimo įvykio būsena
--warning oklch(0.80 0.14 75) ~ #d9b86b Įspėjimas, vykdoma būsena
--danger oklch(0.66 0.22 25) ~ #d65b48 Destrukcinis veiksmas, kietas stop
Dosjė · 04 / 09 · Tipografija

Trys balsai, vienas taisyklynas.

Space Grotesk display tikslams — siauresnis, vėsesnis grotesque, vizualiai išsiskiriantis nuo Feeldreamy Sora. Inter kūnui. JetBrains Mono etiketėms ir šaderio užrašams. Visi variable, naudojama tik wght ašis.

display-cinema Hero h1 — vienas per puslapį
Šriftas
Space Grotesk · 500
Dydis
4.5rem (72px) → 9rem (144px)
Sklandus
clamp(4.5rem, 4rem + 6vw, 9rem)
Eilutė
0.92
Tarpai
-0.04em
Dreamchasers
display-xl Antrinių puslapių h1
Šriftas
Space Grotesk · 500
Dydis
3rem (48px) → 5.5rem (88px)
Sklandus
clamp(3rem, 2.5rem + 3vw, 5.5rem)
Eilutė
0.96
Tarpai
-0.035em
Dreamchasers
display-lg Sekcijų h2
Šriftas
Space Grotesk · 500
Dydis
2.25rem (36px) → 3.5rem (56px)
Sklandus
clamp(2.25rem, 1.9rem + 2vw, 3.5rem)
Eilutė
1.04
Tarpai
-0.03em
Dreamchasers
heading-md Posekcijų h3
Šriftas
Space Grotesk · 500
Dydis
1.5rem (24px) → 2rem (32px)
Sklandus
clamp(1.5rem, 1.3rem + 1vw, 2rem)
Eilutė
1.18
Tarpai
-0.02em
Dreamchasers
heading-sm Kortelių antraštės, h4
Šriftas
Space Grotesk · 500
Dydis
1.25rem (20px) → 1.5rem (24px)
Sklandus
clamp(1.25rem, 1.2rem + 0.3vw, 1.5rem)
Eilutė
1.25
Tarpai
-0.01em
Dreamchasers
body-lg Lede, pull-quote
Šriftas
Inter · 400
Dydis
1.25rem (20px) → 1.5rem (24px)
Sklandus
clamp(1.25rem, 1.2rem + 0.3vw, 1.5rem)
Eilutė
1.55
Tarpai
-0.005em
Dreamchasers
body Numatytoji pastraipa
Šriftas
Inter · 400
Dydis
1.0625rem (17px) → 1.0625rem (17px)
Sklandus
statinis
Eilutė
1.62
Tarpai
0
Dreamchasers
body-sm Kortelės tekstas, paantraštė
Šriftas
Inter · 400
Dydis
0.9375rem (15px) → 0.9375rem (15px)
Sklandus
statinis
Eilutė
1.55
Tarpai
0
Dreamchasers
label Didžiosios sekcijos etiketė
Šriftas
JetBrains Mono · 500
Dydis
0.75rem (12px) → 0.75rem (12px)
Sklandus
statinis
Eilutė
1.0
Tarpai
+0.18em
Cinematic aurora · Vilnius · 2026
caption Išnaša, meta linija
Šriftas
Inter · 400
Dydis
0.75rem (12px) → 0.75rem (12px)
Sklandus
statinis
Eilutė
1.4
Tarpai
+0.02em
Cinematic aurora · Vilnius · 2026

Hierarchijos taisyklės

  1. Tiksliai vienas display-cinema kiekviename puslapyje — hero <h1>.
  2. Sekcijų etiketės — mono, didžiosios raidės, +0.18em tarpai — pvz. STUDIJA · 01 / 05.
  3. Niekur jokios kursyvinės. Pabrėžiama aurora-gradient tekstu arba 500 svoriu.
  4. Niekada nelipame virš 500 — kinematografinis registras renkasi orą, ne svorį.
  5. Skaičiai: font-feature-settings: 'tnum' 1 visur, kur jie pasirodo lentelėse.
  6. Lietuviškas tekstas naudoja identišką skalę — Space Grotesk latin-ext padengia visus reikalingus diakritikus.
Dosjė · 05 / 09 · Judesio Sistema

Vienuolika primityvų. Vienas tempas.

Visos kreivės yra cubic-bezier — jokių spyruoklių CSS. Spyruoklės gyvena tik R3F per lerp. Kiekvienas primityvas deklaruoja savo savybės kontraktą, trukmę ir kreivę.

m-aurora-drift 28s

Fonu plaukianti šaderio spektro rotacija, begalinė

Kreivė
linear
Savybė
šaderio uniformas uTime
m-bloom-follow 280ms (lag)

Pelės žiedo poslinkis

Kreivė
cubic-bezier(0.16, 1, 0.3, 1)
Savybė
transform: translate3d, lerp 0.12
m-dolly-zoom rišti su slinktimi

Sekcijos dolly slinkties metu

Kreivė
linear
Savybė
camera.position.z, camera.fov
m-lens-flare-sweep 1100ms

Sekcijos skirtuko šluota

Kreivė
cubic-bezier(0.65, 0, 0.35, 1)
Savybė
translateX, opacity
m-particle-disperse 1400ms

Sapno objekto suskirstymas į taškus

Kreivė
cubic-bezier(0.83, 0, 0.17, 1)
Savybė
geometrijos atributai
m-fade-rise 720ms

Elementas įžengia į žiūros lauką

Kreivė
cubic-bezier(0.22, 1, 0.36, 1)
Savybė
opacity, translateY 24px → 0
m-aurora-text 6s ciklas

Auroros gradiento teksto šimeris

Kreivė
ease-in-out
Savybė
background-position 0% → 200%
m-glass-lift 220ms

Kortelės hover

Kreivė
cubic-bezier(0.2, 0.8, 0.2, 1)
Savybė
translateY -4px, šešėlio žiedas
m-pulse-orb 4.4s ciklas

Sapno objekto kvėpavimas

Kreivė
ease-in-out
Savybė
scale 1.0 → 1.04
m-press 90ms

Mygtuko paspaudimas

Kreivė
cubic-bezier(0.4, 0, 1, 1)
Savybė
scale 1 → 0.97
m-page-transition 540ms

View Transitions API

Kreivė
cubic-bezier(0.65, 0, 0.35, 1)
Savybė
opacity, translateY 10vh
Įrenginio pakopų strategija

High → Mid → Low → Fallback

Tikslinis FPS
60
DPR
1.75
Postprocess
Bloom + CA + Vignette
Pastabos
M1+/M2/M3, RTX, iPhone 13+
Tikslinis FPS
45–60
DPR
1.25
Postprocess
Tik Bloom
Pastabos
Snapdragon 7, M-iPad, iPhone 11–12
Tikslinis FPS
30
DPR
1.0
Postprocess
Jokio
Pastabos
Senesni Android, iPhone XR — tik šaderis
Tikslinis FPS
statinis
DPR
n/a
Postprocess
n/a
Pastabos
Sumažintas judesys / nėra WebGL2 / SSR

Vykdymo metu reguliuoja drei <PerformanceMonitor>: ilgalaikis FPS žemiau 40 paleidžia onDecline, pakopa krenta — efektai šalinami tvarka.

Sumažintas judesys

Statinis gradiento sferos atsarginis variantas

Kai prefers-reduced-motion: reduce sutampa, hero drobė niekada nesumontuojama. Pelės žiedas išjungtas. Aurora teksto šimeris krenta į statinį gradientą. Lens flare šluostės virsta 60ms perėjimais. Dalelių išsklaidymas pakeičiamas 180ms opacity keitimu.

Dosjė · 06 / 09 · Komponentų Biblioteka

Kiekviena dalis, savo kambaryje.

Kiekvienas Auroros komponentas, atvaizduotas gyvai. Failų keliai ir vienos eilutės vaidmenys. Visas inventorius — montažo medžiaga.

Išdėstymas

Frame · letterbox 16:9

Kinematografinis letterbox

Pilnos drobės, suapvalintas, stiklo kraštinės konteineris — „spaudos rinkinio" rėmas.

Frame src/components/aurora/Frame.astro

Pasirinktinis letterbox propas užfiksuoja 16:9 santykį. Surface-deep užpildas, surface-edge plona linija.

Section · default

Section suteikia kiekvienam blokui vertikalų ritmą: padding-block svyruoja 5rem → 12vh → 9rem pagal nutylėjimą, su pasirinktiniais compact arba loose variantais.

Section src/components/aurora/Section.astro

Plotis: siauras (64rem) · standartinis (80rem) · platus (96rem) · pilnas. Tarpai: compact, default, loose.

LensFlareDivider src/components/aurora/LensFlareDivider.astro

Slinkties valdoma šluota per animation-timeline: view(). Krinta į statinę gradiento liniją sumažinto judesio režime.

AuroraStreak src/components/aurora/AuroraStreak.astro

Švelnesnė, begalinio šimerio alternatyva LensFlareDivider. Naudojama tarp posekcijų.

Primityvai

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

Mono didžiosios žymos. Tonai: default, outline, glow (kreminis tekstas ant surface-deep su violetiniu žiedu).

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

Trys variantai. Cinema: violetinis→rožinis gradientas su bloom hover. Ghost: plona kraštinė, šviesėja į kreminę. Link: aurora pabraukimas auga ant fokuso.

Užkišk čia pelę

Stiklo kortelė pakyla 4px, įgyja violetinį žiedą ir paleidžia švelnų bloom šešėlį.

Card src/components/aurora/Card.astro

Stiklo kortelės primityvas. Surface-deep 80% su backdrop-blur. Polimorfinis article / div / a.

8
Žingsnių piltuvas
7
Apmąstymo skyriai
Beta
Būsena
Stat src/components/aurora/Stat.astro

Didelis display skaičius virš mono etiketės. Pasirinktinis accent apverčia reikšmę į aurora gradientą.

Turinys

Danielius Šalavka
Įkūrėjas · CEO · Vilnius

Danielius Šalavka

Ilgametis Tele2 reklamų veidas nuo 2015-ųjų, ISM verslo studijų studentas, BALTPIX ir Finansiškai Raštingi filmuotojas. Jis kuria istoriją, kurią Dreamchasers pasakoja pasauliui.

PhotographyVideo ProductionActingForeign Languages
Skaityti profilį
FounderCard src/components/aurora/FounderCard.astro

Portretas + outline pill + esmė + žetonų eilė + skaitymo nuoroda. Hover pakelia ir sušildo bloom šešėlį aurora-pink atspalviu.

feeldreamy.com
FEELDREAMY / SKAITYMAS
SKAITYMAS · 07 / 08
Motyvas
Pasikartojantis kritimo motyvas, grįžtantis pastarąsias 14 naktų. Streso signatūra, ne pranašystė.
Produktas 01

FeeldreamyLens

Tavo sapnas reiškia daugiau, nei manai.

Sapnų analizės DI SaaS. Papasakok sapną — gausi aštuonių žingsnių apmąstymą: emocinę architektūrą, pasikartojančius simbolius, mėnulio fazę ir klausimą, su kuriuo verta pabūti. Pagrįsta, ne pranašaujanti.

8
Žingsniai
7
Skyriai
Beta
Būsena
Atraskite Feeldreamy
ProductShowcase + BrowserChromeMockup src/components/aurora/ProductShowcase.astro

2-stulpelių produkto pristatymas. Naršyklės karkasas kairėje, tekstas + statai + CTA dešinėje. Karkaso vidus naudoja violetinį radialinį žybsnį.

  1. 2025 → dabar
    Laisvai samdomas filmuotojas / fotografas
    BALTPIX (Vilnius)
  2. 2024 → dabar
    Laisvai samdomas filmuotojas
    UAB Finansiškai Raštingi
  3. 2015 → dabar
    Sutartinis aktorius
    Tele2
    Daugiau nei dešimt metų nuoseklumo ekrane.
TimelineItem src/components/aurora/TimelineItem.astro

Eilutė vertikalioje laiko juostoje. Taškas, mono periodas, vaidmuo, organizacija, kontekstas. current uždega tašką aurora gradientu.

Aistringas inovacijoms ir verslui. Mėgsta nardyti į kriptovaliutų ir akcijų grafikus. Įamžina akimirkas kamera.
Danielius Šalavka LinkedIn bio, 2025
PullQuote src/components/aurora/PullQuote.astro

Redakcinis pull-quote. Aurora-gradient kabutės ženklas viršuje kairėje, display tekstas, mono šaltinio eilutė.

El. paštas hello@dreamchasers.lt
LinkedIn
Danielius Rokas
Teisinė

Dreamchasers, MB · Vilnius, Lietuva · 2026

ContactBlock src/components/aurora/ContactBlock.astro

El. pašto eilutė, LinkedIn duetas, teisinis blokas. Aurora gradiento pabraukimas auga ant hover kiekvienai nuorodai.

Hero ir WebGL dalys

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

R3F drobė. Valdo slinkties progresą, pelės sekimą, pakopų detekciją ir fallback vartus. Hidruotas client:visible. Gyvas viršelis šio dosjė viršuje — tai ir yra komponentas.

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

DOM lygmens linzės žiedas. Hidruotas client:idle. Aktyvus visame šiame puslapyje — pajudink pelę ir pamatysi švelnų cyan→pink aurelę (išjungta sumažinto judesio arba liečiamuose įrenginiuose).

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

Viršūnių + fragmentų šaderiai pateikti kaip TS moduliai — minifikuojami kartu su salos paketu. ~140 eilučių su Ashima Arts simplex triukšmu.

Dosjė · 07 / 09 · Parašo Momentas — WebGL Hero

Pirmas kadras — įrodymas.

Pilnos drobės kanvas užima hero. Pasirinktinis fragmentų šaderis tapo auroros juosteles ant kosminio dugno. Ledinio stiklo ikozaedras kvėpuoja centre. Pelė pridėjus žiedo centrą šaderiui. Slinkties metu kamera važiuoja į priekį, o sapno objektas išsiskaido į kitos sekcijos turinį. Žemiau: ta pati scena atvaizduota pusės viewporto dydyje kontroliuojamoje aplinkoje.

01

GLSL auroros šaderis

Pilno ekrano kvadratas. fBm triukšmas valdo spalvų mišinį tarp teal → violet → pink → cream. uMouse prideda švelnų bloom centrą, uMouseStrength jį silpnina. Spalvų uniformai iš anksto apskaičiuojami iš OKLCH žetonų.

02

R3F Float scena

Vienas suapvalintas ikozaedras drei <Float> apvalkale. <MeshTransmissionMaterial> suteikia ledinio stiklo efektą: transmission 1, thickness 0.9, IOR 1.4, chromatic aberration 0.08, backside on.

03

Slinkties valdoma dolly

DollyRig lerpina kamerą z nuo 5.0 iki 1.4 ir FOV nuo 38 iki 52 per pirmuosius 100svh. Po hero išėjimo scena išmontuojama per IntersectionObserver — GPU grįžta į idle.

04

Veikimo biudžetas

Paketas: ~256 KB gzipped visai hero salai (three.js dominuoja). Už hero ribų svetainė siunčia ~14 KB judesio. Kaina sąžininga ir mes ją priimame.

Šaderio uniformai — JS perdavimas

Šeši žetonai, vienas fragmentų šaderis.

// HeroSceneIsland.tsx — uniformų perdavimas
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 — fragmento branduolys

fBm, spalvų mišinys, bloom žybsnis.

// aurora.glsl.ts — fragmento branduolys
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);
Atsarginės strategijos

Trys įdėtos strategijos, tvarka.

  1. Sumažintas judesys / nėra WebGL2 / SSR — grynas CSS hero: statinis aurora konic-gradient su iš anksto atvaizduota sfera. Jokia JS sala niekada nepaleidžiama.
  2. Hero už ekrano ribų — IntersectionObserver išmontuoja <Canvas> žemiau 5% perimavimo. Snapshot AVIF pakeičia kaip fiksuotą foną.
  3. Žemos pakopos įrenginys — scena atvaizduojama be postprocessingo; chromatinė aberacija perpus; distortion krenta iki 0; DPR ribojamas iki 1.0; dalelės išjungtos.
Dosjė · 08 / 09 · Tarpai, Išdėstymas, Lūžiai

Letterbox virš tinklelio.

Auroros išdėstymas pirmiausia redakcinis: siauri stulpeliai prozai, platūs etapai produktų pristatymams. Kinematografinės rėmo proporcijos remiasi 16:9; konteinerio ribos įsijungia ties plataus lūžiu.

Tarpų skalė

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

Glaustas sekcijos paddingas (block)

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

Standartinis sekcijos paddingas (block)

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

Hero / dosjė sekcijos paddingas (block)

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

Redakcinis teksto stulpelis

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

Numatytasis puslapio plotis

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

Hero, showcase, platus turinys

radius-card 22px

Stiklo kortelės, rėmai

radius-pill 999px

Pill'ai, mygtukai, kontakto nuorodos

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

Vidinis sekcijos tarpas

Lūžiai

sm ≥ 600px

Maži telefonai → phabletai

md ≥ 760px

Planšetės — pasirodo header nav, founder 2-col

lg ≥ 960px

Maži nešiojami — ProductShowcase tampa 2-col

xl ≥ 1280px

Numatytasis darbastalis — konteinerio ribos

2xl ≥ 1536px

Kinas — atsiveria platus konteineris

Kinematografinės rėmo proporcijos

16 : 9 · letterbox

Hero / showcase

„Rėmas" iš spaudos rinkinio. Visada pilnas savo stulpelyje.

Sluoksnis 1 — šaderis Sluoksnis 2 — sapno objektas Sluoksnis 3 — DOM apdanga
Dosjė · 09 / 09 · Prieinamumas

Kinas, bet matomas visiems.

Kinematografinis registras yra opt-in. Kiekvienas judesys turi sumažinto judesio kelią, kiekvienas spektro tonas turi patikrintą kontrasto porą, o kiekvienas interaktyvus elementas turi kreminį fokuso žiedą prieš kosmosą, atitinkantį 3:1 ne tekstui AAA.

Kontrasto poros (prieš tamsią drobę)

--ink-luminous ant --surface-cosmos 17,4 : 1 AAA — visi dydžiai
--ink-soft ant --surface-cosmos 13,2 : 1 AAA — visi dydžiai
--ink-muted ant --surface-cosmos 7,1 : 1 AAA normalus / AAA didelis
--ink-faint ant --surface-cosmos 3,6 : 1 AA tik didelis
--aurora-cream ant --surface-cosmos 16,1 : 1 AAA — hero, fokuso žiedas
--aurora-teal ant --surface-cosmos 9,8 : 1 AAA — saugus kūno dydyje
--aurora-pink ant --surface-cosmos 8,4 : 1 AAA — saugus kūno dydyje
--aurora-violet ant --surface-cosmos 5,1 : 1 AA normalus — tik antraštėms
--ink-luminous ant --surface-raised 13,9 : 1 AAA — kortelių turinys
--aurora-cream ant --surface-void 20,1 : 1 AAA — footerio hero
Fokuso stiliai

Kreminis žiedas ant kosmoso.

Kiekvienas fokusuojamas elementas rodo 2px solid var(--focus-ring) su 4px poslinkiu. Kreminė vertė pereina 16,1 : 1 prieš kosmosą — 3 : 1 ne tekstui AAA, matomumas garantuotas.

Sumažintas judesys

Diržas ir petnešos.

  • Hero WebGL drobė niekada nesumontuojama.
  • Pelės žiedas grąžina null mount metu.
  • Aurora teksto šimeris krenta į statinį gradientą.
  • Lens flare šluostės virsta 60ms perėjimais.
  • View Transitions palieka tik perėjimą.
Klaviatūra

Kiekviena sekcija pasiekiama Tab.

  • Skip link — pirmas fokusuojamas, matomas tik fokuse.
  • Header nav — tikras <nav> <ul>.
  • Direction switcher — fokuso spąstai, Escape uždaro.
  • FAQ akordeonas — WAI-ARIA disclosure modelis.
Žymėjimai

Tikras DOM, kiekvieną kartą.

Hero <h1> — tikras DOM, niekada drobės viduje. Three.js laiko vizualumą; semantika gyvena apdangoje. <main>, <header>, <footer>, <nav> naudojami dokumentuotai.

Dosjė pabaiga.

Brandbook'as — kanonas. Komponentai keliauja iš šio puslapio; žetonai gyvena aurora.css; tekstas pasirašytas studijos. Ilgesnis dokumentavimas — markdown šaltinyje.

Grįžti į Aurorą Markdown šaltinis hello@dreamchasers.lt