feat: immerse the portfolio in a chromatic synthwave night

Carry rose, violet, coral, electric blue and cyan through the interface, road, terrain, signs and atmosphere. Add a Blender-authored paint edition and matching runtime fallback captures. Interpolate atmospheric color on a small sky lattice and enrich existing speed effects without another rendering pass.

Preserve approved copy, project media, metadata, navigation contracts and adaptive audio. Verified with typecheck, client/SSR builds, validated prerendering, artifact and transfer checks, responsive Chrome interaction, fallback checks and Intel-backed performance sampling.
This commit is contained in:
2026-09-05 13:17:53 +03:00
parent 43e510341e
commit 5d5935a1f8
24 changed files with 693 additions and 130 deletions

View File

@@ -113,8 +113,8 @@ export function createSign(
const housingMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x334956,
emissive: 0x23404e,
color: 0x654169,
emissive: 0x512547,
emissiveIntensity: 0.6,
roughness: 0.28,
metalness: 0.7,
@@ -126,7 +126,7 @@ export function createSign(
const backplateMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x172e3c,
color: 0x301f47,
roughness: 0.72,
metalness: 0.38,
transparent: true,
@@ -137,7 +137,7 @@ export function createSign(
const facePanelMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x061018,
color: 0x11091d,
roughness: 0.9,
metalness: 0.12,
transparent: true,
@@ -148,8 +148,8 @@ export function createSign(
const supportMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x21343e,
emissive: 0x163845,
color: 0x3c2752,
emissive: 0x38204e,
emissiveIntensity: 0.4,
roughness: 0.56,
metalness: 0.68,
@@ -161,8 +161,8 @@ export function createSign(
const edgeMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x39747a,
emissive: 0x55b9c0,
color: 0xa3488d,
emissive: 0xff79c0,
emissiveIntensity: 1.1,
roughness: 0.42,
metalness: 0.5,
@@ -174,8 +174,8 @@ export function createSign(
const routeMaterial = resources.own(
'material',
new THREE.MeshStandardMaterial({
color: 0x8e6446,
emissive: 0xb9723f,
color: 0xbc744d,
emissive: 0xffae6b,
emissiveIntensity: 0.8,
roughness: 0.48,
metalness: 0.42,
@@ -706,7 +706,7 @@ function drawLabel(
context.imageSmoothingQuality = 'high';
context.globalAlpha = 0.16;
context.fillStyle = '#8aa1a6';
context.fillStyle = '#cfabcd';
for (const [x, y, scratchWidth] of [
[312, 84, 142],
[742, 424, 96],
@@ -717,25 +717,25 @@ function drawLabel(
}
context.globalAlpha = 1;
context.fillStyle = '#52bbc2';
context.fillStyle = '#ff95cd';
context.fillRect(82, 72, 10, 368);
context.fillStyle = '#91a6a9';
context.fillStyle = '#bbaae0';
context.font = SIGN_MARKER_FONT;
context.textAlign = 'left';
context.textBaseline = 'middle';
context.fillText(`ROUTE ${route.marker} / NEXT`, 142, 120);
context.globalAlpha = 0.6;
context.fillStyle = '#2f4650';
context.fillStyle = '#61416d';
context.fillRect(142, 174, 1_610, 2);
context.globalAlpha = 1;
context.fillStyle = '#e2f7f4';
context.fillStyle = '#fff2df';
const labelSize = fittedLabelSize(context, route.label, 1_520);
context.font = `650 ${labelSize}px "Geist Variable", sans-serif`;
context.fillText(route.label, 142, 326);
context.strokeStyle = '#cb9160';
context.strokeStyle = '#ffb879';
context.lineWidth = 10;
context.lineCap = 'square';
context.lineJoin = 'miter';