17:I[54961,["/_next/static/immutable/chunks/10r1qlsoygogh.js","/_next/static/immutable/chunks/1_f1jqdld4ngu.js","/_next/static/immutable/chunks/19vifo6_mi-qi.js","/_next/static/immutable/chunks/3kb194ft35tsv.js","/_next/static/immutable/chunks/1kmzbl6k42gme.js","/_next/static/immutable/chunks/1ekzdpc_7chvz.js","/_next/static/immutable/chunks/3kscktpsmulhw.js","/_next/static/immutable/chunks/1wyf15k9llk8a.js"],"default"] 18:T1b6e,'use client'; import { useEffect, useRef, useState } from 'react'; import type { GildedScene } from './gilded-scene'; export type GildedCardProps = { compact?: boolean; paused?: boolean; backgroundSrc?: string; emblemSrc?: string; className?: string; }; export default function GildedCard({ compact = false, paused = false, backgroundSrc = '/media/atmosphere.webp', emblemSrc = '/branding/Isotype.svg', className = '', }: GildedCardProps) { const canvas = useRef(null); const engine = useRef(null); const pausedRef = useRef(paused); const [ready, setReady] = useState(false); const [failed, setFailed] = useState(false); const still = paused; pausedRef.current = still; useEffect(() => { let cancelled = false; setReady(false); setFailed(false); import('./gilded-scene') .then(({ createGildedScene }) => { if (cancelled || !canvas.current) return; try { engine.current = createGildedScene(canvas.current, { compact, backgroundSrc, emblemSrc, onReady: () => { if (!cancelled) setReady(true); }, onLost: () => { if (!cancelled) setFailed(true); }, }); engine.current.setPaused(pausedRef.current); } catch { if (!cancelled) setFailed(true); } }) .catch(() => { if (!cancelled) setFailed(true); }); return () => { cancelled = true; engine.current?.dispose(); engine.current = null; }; }, [compact, backgroundSrc, emblemSrc]); useEffect(() => { engine.current?.setPaused(still); }, [still]); return (

); } const styles = ` .gilded-card{position:relative;isolation:isolate;width:100%;height:760px;min-height:600px;overflow:hidden;color:#eee9df;background:#07090b;font-family:'Urbanist Variable',Arial,sans-serif;container-type:inline-size} .gilded-card *{box-sizing:border-box}.gc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;touch-action:pan-y;transition:opacity 1.3s cubic-bezier(.16,.82,.19,1)}.gc-canvas.gc-ready{opacity:1}.gc-failed .gc-canvas{display:none} .gc-header,.gc-footer{position:absolute;z-index:2;left:28px;right:28px;display:flex;justify-content:space-between;gap:16px;align-items:center;pointer-events:none}.gc-header{top:23px}.gc-brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600}.gc-brand img{width:22px;height:22px}.gc-edition,.gc-footer,.gc-kicker{font:9px/1.6 'IBM Plex Mono',monospace;letter-spacing:2px;color:#bcb09b}.gc-edition{opacity:.7}.gc-footer{bottom:19px;color:#a89c89;letter-spacing:1.5px;font-size:8px}.gc-gesture{color:#c4b698} .gc-bottom{position:absolute;z-index:2;bottom:65px;left:20px;right:20px;text-align:center;pointer-events:none}.gc-kicker{font-size:8px;letter-spacing:2.2px;color:#ceae7d}.gc-bottom h3{font-size:24px;font-weight:500;letter-spacing:-.65px;line-height:1.3;margin:12px 0 8px;text-wrap:balance;text-shadow:0 2px 16px #000}.gc-bottom p{font-size:13px;color:#b0aba1;margin:0 0 18px}.gc-controls{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:12px}.gc-controls button{font:12px 'Urbanist Variable',Arial,sans-serif;min-height:44px;padding:12px 23px;border-radius:40px;cursor:pointer;transition:color .4s cubic-bezier(.2,.8,.17,1),border-color .5s cubic-bezier(.2,.8,.17,1),box-shadow .5s cubic-bezier(.2,.8,.17,1)}.gc-turn{display:flex;align-items:center;gap:25px;color:#eee2c6;border:1px solid #b69b6477;background:radial-gradient(ellipse at var(--gc-px,40%) 0%,#c1a36b24,transparent 72%),#0b0e10bd;box-shadow:inset 0 1px 1px #e3c89a33,0 5px 14px #0009}.gc-turn:hover:not(:disabled){border-color:#e1c292;box-shadow:inset 0 1px 1px #e3c89a88,0 0 22px #df9e5127}.gc-turn>span{font-size:18px}.gc-pause{color:#b8afa1;border:1px solid #93806935;background:#0c101173}.gc-pause:hover:not(:disabled){color:#eee2c6;border-color:#c2a77588}.gc-controls button:disabled{opacity:.45;cursor:default}.gc-controls button:focus-visible{outline:1px solid #fff;outline-offset:3px} .gc-fallback{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse at center,#62473222,transparent 65%);z-index:-1}.gc-fallback>div{width:230px;height:322px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:1px solid #c7a76b88;outline:1px solid #c7a76b44;outline-offset:-8px;background:#101418;padding:28px;color:#d7b97c;font:13px Georgia,serif;letter-spacing:3px}.gc-fallback img{width:110px;height:110px}.gc-ready~.gc-fallback{visibility:hidden}.gc-failed .gc-fallback{visibility:visible;z-index:0}.gc-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .gc-compact{height:100%;min-height:0}.gc-compact .gc-fallback>div{width:130px;height:182px;padding:15px;font-size:9px}.gc-compact .gc-fallback img{width:70px;height:70px} @container(max-width:600px){.gc-header{top:20px;left:20px;right:20px}.gc-edition{font-size:7px;letter-spacing:1px}.gc-bottom{bottom:51px}.gc-bottom h3{font-size:20px}.gc-bottom p{font-size:12px}.gc-kicker{font-size:7px;letter-spacing:1.5px}.gc-footer{left:20px;right:20px;font-size:7px}.gc-gesture{display:none}.gc-controls button{padding:11px 18px}.gilded-card:not(.gc-compact){height:690px;min-height:600px}} @media(prefers-reduced-motion:reduce){.gilded-card *{transition:none!important}} `; 19:T612d,import * as THREE from 'three'; import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { cardArtwork } from './gilded-artwork'; import { atmosphereFragment, driftFragment, foilFragment, interiorFragment, particleFragment, particleVertex, screenVertex, surfaceVertex, threadFragment, threadVertex, } from './gilded-shaders'; export type GildedSceneOptions = { compact: boolean; backgroundSrc: string; emblemSrc: string; onReady: () => void; onLost: () => void; }; export type GildedScene = { setPaused: (paused: boolean) => void; flip: () => void; dispose: () => void; }; function rounded(w: number, h: number, r: number) { const shape = new THREE.Shape(), x = -w / 2, y = -h / 2; shape.moveTo(x + r, y); shape.lineTo(x + w - r, y); shape.quadraticCurveTo(x + w, y, x + w, y + r); shape.lineTo(x + w, y + h - r); shape.quadraticCurveTo(x + w, y + h, x + w - r, y + h); shape.lineTo(x + r, y + h); shape.quadraticCurveTo(x, y + h, x, y + h - r); shape.lineTo(x, y + r); shape.quadraticCurveTo(x, y, x + r, y); return shape; } function arch() { const s = new THREE.Shape(); s.moveTo(-0.89, -0.85); s.lineTo(-0.89, 0.18); s.absarc(0, 0.18, 0.89, Math.PI, 0, true); s.lineTo(0.89, -0.85); s.closePath(); return s; } function faceUV(geometry: THREE.BufferGeometry) { const p = geometry.getAttribute('position'), uv = new Float32Array(p.count * 2); for (let i = 0; i < p.count; i++) { uv[i * 2] = (p.getX(i) + 1.25) / 2.5; uv[i * 2 + 1] = (p.getY(i) + 1.75) / 3.5; } geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2)); return geometry; } export function createGildedScene( canvas: HTMLCanvasElement, options: GildedSceneOptions, ): GildedScene { const { compact, onLost, onReady } = options; const root = canvas.parentElement!; const small = root.clientWidth < 600; const media = matchMedia('(prefers-reduced-motion: reduce)'); // Retain the last frame when paused, offscreen, or captured by a host preview. const renderer = new THREE.WebGLRenderer({ canvas, alpha: false, antialias: !small, stencil: true, preserveDrawingBuffer: true, powerPreference: 'high-performance', }); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; renderer.setPixelRatio(Math.min(devicePixelRatio, small || compact ? 1 : 1.5)); renderer.setClearColor(0x07090b); const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(30, 1, 0.1, 80); const studio = new RoomEnvironment(), pmrem = new THREE.PMREMGenerator(renderer); const environment = pmrem.fromScene(studio, 0.04); scene.environment = environment.texture; studio.dispose(); pmrem.dispose(); const card = new THREE.Group(); scene.add(card); const materials = new Set(), geometries = new Set(), textures = new Set(); let presented = false, disposed = false, contextLost = false, paused = false, visible = false, frame = 0, last = 0, time = 0, started = performance.now(); let width = 1, height = 1, slowFrames = 0; const motion = { x: 0, y: 0, tx: 0, ty: 0, spin: 0, goal: 0, velocity: 0, drag: false, dragX: 0, dragAt: 0, inside: false, mouse: false, }; const pointer = new THREE.Vector2(0.5, 0.5), previousPointer = pointer.clone(); const uTime = { value: 0 }, uPointer = { value: new THREE.Vector2() }, uReveal = { value: media.matches ? 2 : -0.1 }; const uCardPointer = { value: new THREE.Vector2(0.5, 0.52) }, uCardHover = { value: 0 }; const uThreadPointer = { value: new THREE.Vector2(0.5, 0.5) }, uThreadHover = { value: 0 }; const uViewport = { value: new THREE.Vector2(1, 1) }; const cardPointerTarget = new THREE.Vector2(0.5, 0.52), pointerNDC = new THREE.Vector2(); const raycaster = new THREE.Raycaster(), hoverPlane = new THREE.Plane(); const planeNormal = new THREE.Vector3(), planePoint = new THREE.Vector3(), pointerHit = new THREE.Vector3(), toCamera = new THREE.Vector3(); const low = small || compact; const ownGeometry = (g: T): T => { geometries.add(g); return g; }; const ownMaterial = (m: T): T => { materials.add(m); return m; }; const ownTexture = (t: T): T => { textures.add(t); return t; }; function addMesh( g: THREE.BufferGeometry, m: THREE.Material, parent: THREE.Object3D = card, ) { const mesh = new THREE.Mesh(ownGeometry(g), ownMaterial(m)); parent.add(mesh); return mesh; } function maskMaterial(m: T) { m.stencilWrite = true; m.stencilRef = 1; m.stencilFunc = THREE.EqualStencilFunc; m.stencilFail = THREE.KeepStencilOp; m.stencilZFail = THREE.KeepStencilOp; m.stencilZPass = THREE.KeepStencilOp; return m; } const empty = ownTexture(new THREE.DataTexture(new Uint8Array([0, 0, 0, 255]), 1, 1)); empty.needsUpdate = true; const skyUniforms = { uTime, uBackdrop: { value: empty as THREE.Texture }, uDrift: { value: empty as THREE.Texture }, uAspect: { value: 1 }, uImageAspect: { value: 1400 / 1694 }, uHasDrift: { value: 0 }, uImageReady: { value: 0 }, uPointer, }; const skyMaterial = ownMaterial( new THREE.ShaderMaterial({ uniforms: skyUniforms, defines: { OCTAVES: low ? 3 : 5 }, vertexShader: screenVertex, fragmentShader: atmosphereFragment, depthTest: false, depthWrite: false, }), ); const sky = addMesh(new THREE.PlaneGeometry(2, 2), skyMaterial, scene); sky.frustumCulled = false; sky.renderOrder = -100; new THREE.TextureLoader().load( options.backgroundSrc, (texture) => { if (disposed) { texture.dispose(); return; } ownTexture(texture); texture.colorSpace = THREE.SRGBColorSpace; skyUniforms.uBackdrop.value = texture; skyUniforms.uImageAspect.value = texture.image.width / texture.image.height; skyUniforms.uImageReady.value = 1; wake(); }, undefined, () => { /* Procedural atmosphere remains usable without an image. */ }, ); // Low-resolution advected displacement: the smoke remembers pointer strokes. let driftA: THREE.WebGLRenderTarget | null = null, driftB: THREE.WebGLRenderTarget | null = null; const driftScene = new THREE.Scene(), driftCamera = new THREE.Camera(); const driftUniforms = { uField: { value: empty as THREE.Texture }, uPointer: { value: pointer }, uVelocity: { value: new THREE.Vector2() }, uDt: { value: 1 / 60 }, uActive: { value: 0 }, }; if (!low && renderer.extensions.has('EXT_color_buffer_float')) { driftA = new THREE.WebGLRenderTarget(160, 100, { type: THREE.HalfFloatType, depthBuffer: false, }); driftB = driftA.clone(); addMesh( new THREE.PlaneGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: driftUniforms, vertexShader: screenVertex, fragmentShader: driftFragment, depthTest: false, depthWrite: false, }), driftScene, ); const color = renderer.getClearColor(new THREE.Color()); renderer.setClearColor(0, 0); for (const target of [driftA, driftB]) { renderer.setRenderTarget(target); renderer.clear(); } renderer.setRenderTarget(null); renderer.setClearColor(color, 1); skyUniforms.uHasDrift.value = 1; } const windowShape = arch(); const frontShape = rounded(2.5, 3.5, 0.12); frontShape.holes.push(windowShape); const bodyGeometry = new THREE.ExtrudeGeometry(frontShape, { depth: 0.065, bevelEnabled: true, bevelSize: 0.013, bevelThickness: 0.016, bevelSegments: 3, curveSegments: 48, }); bodyGeometry.translate(0, 0, -0.035); const gold = ownMaterial( new THREE.MeshStandardMaterial({ color: 0xb39154, metalness: 0.9, roughness: 0.27, }), ); addMesh(bodyGeometry, gold); function foil(back: boolean) { const atlas = cardArtwork(back, low ? 640 : 1024); const texture = ownTexture( new THREE.DataTexture(atlas.data, atlas.width, atlas.height), ); texture.needsUpdate = true; texture.generateMipmaps = true; texture.minFilter = THREE.LinearMipmapLinearFilter; texture.magFilter = THREE.LinearFilter; texture.anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy()); return new THREE.ShaderMaterial({ uniforms: { uArt: { value: texture }, uTexel: { value: new THREE.Vector2(1 / atlas.width, 1 / atlas.height) }, uTime, uReveal, uPointer, uCardPointer, uCardHover, uFoil: { value: 1 }, }, defines: { OCTAVES: 3 }, vertexShader: surfaceVertex, fragmentShader: foilFragment, }); } const front = addMesh(faceUV(new THREE.ShapeGeometry(frontShape, 64)), foil(false)); front.position.z = 0.05; front.renderOrder = 4; const back = addMesh( faceUV(new THREE.ShapeGeometry(rounded(2.5, 3.5, 0.12), 48)), foil(true), ); back.rotation.y = Math.PI; back.position.z = -0.07; back.renderOrder = 4; // Invisible stencil keeps the miniature world inside the aperture as the card turns. const stencil = addMesh( new THREE.ShapeGeometry(windowShape, 48), new THREE.MeshBasicMaterial({ colorWrite: false, depthWrite: false, depthTest: false, stencilWrite: true, stencilRef: 1, stencilFunc: THREE.AlwaysStencilFunc, stencilZPass: THREE.ReplaceStencilOp, }), ); stencil.position.z = 0.049; stencil.renderOrder = 1; const niche = addMesh( faceUV(new THREE.ShapeGeometry(windowShape, 48)), maskMaterial( new THREE.ShaderMaterial({ uniforms: { uTime }, vertexShader: surfaceVertex, fragmentShader: interiorFragment, }), ), ); niche.position.z = -0.28; niche.renderOrder = 2; const relief = new THREE.Group(); relief.position.set(0, 0.12, -0.02); card.add(relief); new SVGLoader().load( options.emblemSrc, (svg) => { if (disposed) return; const emblem = new THREE.Group(); svg.paths.forEach((path, i) => SVGLoader.createShapes(path).forEach((shape) => { const geometry = new THREE.ExtrudeGeometry(shape, { depth: 9, bevelEnabled: true, bevelSize: 1, bevelThickness: 1.4, bevelSegments: 3, curveSegments: 24, }); geometry.translate(-109, -105, -4.5); const material = maskMaterial( new THREE.MeshPhysicalMaterial({ color: [0xe6aa72, 0xd48785, 0x928979, 0xc8b99b, 0xf0d6ae][i] || 0xd6b682, metalness: 0.86, roughness: 0.23, clearcoat: 1, clearcoatRoughness: 0.15, side: THREE.DoubleSide, }), ); const mesh = addMesh(geometry, material, emblem); mesh.renderOrder = 3; }), ); emblem.scale.set(0.0056, -0.0056, 0.0056); relief.add(emblem); wake(); }, undefined, () => { /* Orbital rings preserve the centerpiece if SVG loading fails. */ }, ); const orbit = new THREE.Group(); orbit.position.y = 0.12; orbit.position.z = -0.14; card.add(orbit); for (let i = 0; i < 3; i++) { const ring = addMesh( new THREE.TorusGeometry( 0.72 + i * 0.052, 0.003 + (i === 0 ? 0.004 : 0), 6, low ? 80 : 140, ), maskMaterial( new THREE.MeshStandardMaterial({ color: 0xb18c57, metalness: 0.88, roughness: 0.35, }), ), orbit, ); ring.rotation.x = 0.24 + i * 0.21; ring.rotation.y = i * 0.34; ring.renderOrder = 3; } const sphereMaterial = ownMaterial( new THREE.MeshPhysicalMaterial({ color: 0xffd2a0, emissive: 0xc76a32, emissiveIntensity: 0.3, metalness: 0.75, roughness: 0.17, }), ); for (const [x, y, color] of [ [-1.11, 1.6, 0xe49296], [1.11, 1.6, 0x90abb5], [-1.11, -1.6, 0x90abb5], [1.11, -1.6, 0xe49296], ] as const) { const m = sphereMaterial.clone(); m.color.setHex(color); const gem = addMesh(new THREE.SphereGeometry(0.039, 14, 10), m); gem.position.set(x, y, 0.063); gem.renderOrder = 5; } const bead = addMesh(new THREE.SphereGeometry(0.062, 16, 12), sphereMaterial); bead.position.set(0, 1.07, 0.076); // These are ambient filaments; there is no card-to-card connector in this slice. const filaments = new THREE.Group(); scene.add(filaments); const threadMaterial = ownMaterial( new THREE.ShaderMaterial({ uniforms: { uTime, uThreadPointer, uThreadHover, uViewport, uThreadRadius: { value: low ? 110 : 190 }, }, vertexShader: threadVertex, fragmentShader: threadFragment, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, }), ); for (let n = 0; n < (low ? 16 : 42); n++) { const seed = n * 1.91, y = Math.sin(seed) * 3.8, z = -2.5 - (n % 7) * 0.18; const points: THREE.Vector3[] = []; for (let j = 0; j <= 12; j++) { const x = -10 + (j / 12) * 20; points.push( new THREE.Vector3( x, y * (0.08 + 0.92 * (Math.abs(x) / 10) ** 0.8) + Math.sin(x * 0.45 + seed) * 0.055, z, ), ); } addMesh( new THREE.TubeGeometry( new THREE.CatmullRomCurve3(points), low ? 60 : 130, 0.0035 + (n % 3) * 0.0015, 3, false, ), threadMaterial, filaments, ); } const count = low ? 65 : 190, positions = new Float32Array(count * 3), sizes = new Float32Array(count), seeds = new Float32Array(count); for (let i = 0; i < count; i++) { const random = (v: number) => { const s = Math.sin((i + 1) * v) * 43758.5; return s - Math.floor(s); }; positions.set( [(random(127.1) - 0.5) * 16, (random(311.7) - 0.5) * 10, -1.2 - random(73.3) * 5], i * 3, ); sizes[i] = 0.7 + random(21.9) * 2.5; seeds[i] = random(15.4); } const dustGeo = ownGeometry(new THREE.BufferGeometry()); dustGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3)); dustGeo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1)); dustGeo.setAttribute('aSeed', new THREE.BufferAttribute(seeds, 1)); const dustMaterial = ownMaterial( new THREE.ShaderMaterial({ uniforms: { uTime, uPixelRatio: { value: renderer.getPixelRatio() } }, vertexShader: particleVertex, fragmentShader: particleFragment, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, }), ); scene.add(new THREE.Points(dustGeo, dustMaterial)); scene.add(new THREE.HemisphereLight(0xffe7ca, 0x293541, 2)); const key = new THREE.DirectionalLight(0xffe3b3, 4); key.position.set(-3, 4, 5); scene.add(key); const rim = new THREE.DirectionalLight(0xa7b8d0, 3); rim.position.set(4, -1, 3); scene.add(rim); function resize() { width = Math.max(1, root.clientWidth); height = Math.max(1, root.clientHeight); camera.aspect = width / height; const desiredHeight = compact ? height * 0.82 : Math.min(height * 0.62, 480); camera.position.set( 0, 0, (3.5 * height) / Math.max(150, desiredHeight) / (2 * Math.tan(Math.PI / 12)), ); camera.updateProjectionMatrix(); camera.updateMatrixWorld(); uViewport.value.set(width, height); const dpr = renderer.getPixelRatio(); if ( canvas.width !== Math.floor(width * dpr) || canvas.height !== Math.floor(height * dpr) ) renderer.setSize(width, height, false); skyUniforms.uAspect.value = camera.aspect; wake(); } function stop() { cancelAnimationFrame(frame); frame = 0; last = 0; } function wake() { if (!disposed && !contextLost && !frame && visible && !document.hidden) frame = requestAnimationFrame(tick); } function tick(now: number) { frame = 0; if (disposed || contextLost || !visible || document.hidden) return; const cap = low ? 30 : 60; if (last && now - last < 1000 / cap - 0.8) { wake(); return; } const dt = last ? Math.min((now - last) / 1000, 0.05) : 1 / cap; last = now; const still = paused || media.matches; if (!still) time += dt; uTime.value = time; const alpha = 1 - Math.exp(-dt * 6); const tx = still ? 0 : motion.tx, ty = still ? 0 : motion.ty; motion.x += (tx - motion.x) * alpha; motion.y += (ty - motion.y) * alpha; if (!still && motion.drag) motion.spin += (motion.goal - motion.spin) * (1 - Math.exp(-dt * 18)); if (!still && !motion.drag) { motion.spin += motion.velocity * dt; motion.velocity *= Math.exp(-dt * 3.8); if (Math.abs(motion.velocity) < 0.12) motion.spin += (motion.goal - motion.spin) * (1 - Math.exp(-dt * 3.2)); } card.rotation.set( motion.y * 0.16, motion.x * 0.27 + motion.spin, still ? 0 : Math.sin(time * 0.4) * 0.008, ); card.position.y = (compact ? 0 : 0.56) + (still ? 0 : Math.sin(time * 0.7) * 0.018); relief.rotation.y = still ? 0 : Math.sin(time * 0.48) * 0.23; relief.rotation.z = still ? -0.05 : -0.05 + Math.sin(time * 0.36) * 0.05; orbit.rotation.z = still ? 0 : Math.sin(time * 0.25) * 0.13; uPointer.value.x += (tx - uPointer.value.x) * alpha; uPointer.value.y += (-ty - uPointer.value.y) * alpha; const hoverActive = !still && motion.inside && motion.mouse; let overCard = false; if (hoverActive) { card.updateMatrixWorld(); pointerNDC.set(pointer.x * 2 - 1, pointer.y * 2 - 1); raycaster.setFromCamera(pointerNDC, camera); planeNormal.set(0, 0, 1).applyQuaternion(card.quaternion); const frontFacing = planeNormal.dot(toCamera.subVectors(camera.position, card.position)) > 0; card.localToWorld(planePoint.set(0, 0, frontFacing ? 0.05 : -0.07)); hoverPlane.setFromNormalAndCoplanarPoint(planeNormal, planePoint); if (raycaster.ray.intersectPlane(hoverPlane, pointerHit)) { card.worldToLocal(pointerHit); overCard = Math.abs(pointerHit.x) <= 1.25 && Math.abs(pointerHit.y) <= 1.75; if (overCard) cardPointerTarget.set( 0.5 + (pointerHit.x / 2.5) * (frontFacing ? 1 : -1), 0.5 + pointerHit.y / 3.5, ); } } const hoverAlpha = 1 - Math.exp(-dt * 8); uCardPointer.value.lerp(cardPointerTarget, hoverAlpha); uCardHover.value += (Number(overCard) - uCardHover.value) * hoverAlpha; uThreadPointer.value.lerp(pointer, hoverAlpha); uThreadHover.value += (Number(hoverActive) - uThreadHover.value) * hoverAlpha; root.style.setProperty('--gc-px', ((motion.x + 1) * 50).toFixed(2) + '%'); uReveal.value = still || compact ? 2 : Math.min(2, (now - started) / 2200 - 0.08); if (driftA && driftB && !still) { driftUniforms.uField.value = driftA.texture; driftUniforms.uDt.value = dt; driftUniforms.uVelocity.value .copy(pointer) .sub(previousPointer) .multiplyScalar(5); driftUniforms.uActive.value = motion.inside ? 1 : 0; renderer.setRenderTarget(driftB); renderer.render(driftScene, driftCamera); renderer.setRenderTarget(null); [driftA, driftB] = [driftB, driftA]; skyUniforms.uDrift.value = driftA.texture; } previousPointer.lerp(pointer, alpha); renderer.render(scene, camera); if (!presented) { presented = true; onReady(); } if (!low && dt > 0.036) slowFrames++; else slowFrames = Math.max(0, slowFrames - 1); if (slowFrames > 90 && renderer.getPixelRatio() > 1) { renderer.setPixelRatio(1); dustMaterial.uniforms.uPixelRatio.value = 1; resize(); slowFrames = 0; } if ( !still || Math.abs(motion.x) + Math.abs(motion.y) + uCardHover.value + uThreadHover.value > 0.001 ) wake(); } function coordinates(event: PointerEvent) { const rect = canvas.getBoundingClientRect(); const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)); const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height)); pointer.set(x, 1 - y); motion.tx = x * 2 - 1; motion.ty = y * 2 - 1; } function move(event: PointerEvent) { motion.inside = true; motion.mouse = event.pointerType !== 'touch'; coordinates(event); if (motion.drag && !paused && !media.matches) { const now = performance.now(), delta = ((event.clientX - motion.dragX) / Math.max(100, height * 0.7)) * 3.3; motion.goal += delta; motion.velocity = THREE.MathUtils.clamp( delta / Math.max(0.008, (now - motion.dragAt) / 1000), -7, 7, ); motion.dragX = event.clientX; motion.dragAt = now; } wake(); } function down(event: PointerEvent) { if (compact || paused || media.matches || event.button !== 0) return; const rect = canvas.getBoundingClientRect(); if (Math.abs(event.clientX - rect.left - width / 2) > Math.min(height * 0.27, 190)) return; coordinates(event); motion.drag = true; motion.goal = motion.spin; motion.velocity = 0; motion.dragX = event.clientX; motion.dragAt = performance.now(); canvas.setPointerCapture(event.pointerId); canvas.style.cursor = 'grabbing'; } function up(event: PointerEvent) { motion.drag = false; motion.goal = Math.round(motion.goal / Math.PI) * Math.PI; if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId); canvas.style.cursor = compact ? 'pointer' : 'grab'; wake(); } function leave() { if (!motion.drag) { motion.inside = false; motion.tx = motion.ty = 0; wake(); } } function flip() { if (!paused && !media.matches) { motion.velocity = 0; motion.goal += Math.PI; wake(); } } function resetMotion() { motion.tx = motion.ty = 0; motion.velocity = 0; motion.drag = false; motion.spin = motion.goal = 0; motion.mouse = false; wake(); } function visibility() { if (document.hidden) stop(); else wake(); } function lost(event: Event) { event.preventDefault(); contextLost = true; stop(); onLost(); } const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) wake(); else stop(); }); observer.observe(canvas); const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(root); canvas.addEventListener('pointermove', move, { passive: true }); canvas.addEventListener('pointerdown', down); canvas.addEventListener('pointerup', up); canvas.addEventListener('pointercancel', up); canvas.addEventListener('pointerleave', leave); canvas.addEventListener('webglcontextlost', lost); canvas.addEventListener('dblclick', flip); media.addEventListener('change', resetMotion); document.addEventListener('visibilitychange', visibility); canvas.style.cursor = compact ? 'pointer' : 'grab'; resize(); return { setPaused(value) { paused = value; motion.tx = motion.ty = 0; wake(); }, flip, dispose() { disposed = true; stop(); observer.disconnect(); resizeObserver.disconnect(); canvas.removeEventListener('pointermove', move); canvas.removeEventListener('pointerdown', down); canvas.removeEventListener('pointerup', up); canvas.removeEventListener('pointercancel', up); canvas.removeEventListener('pointerleave', leave); canvas.removeEventListener('dblclick', flip); canvas.removeEventListener('webglcontextlost', lost); media.removeEventListener('change', resetMotion); document.removeEventListener('visibilitychange', visibility); for (const texture of textures) texture.dispose(); for (const material of materials) material.dispose(); for (const geometry of geometries) geometry.dispose(); driftA?.dispose(); driftB?.dispose(); environment.dispose(); scene.clear(); renderer.dispose(); renderer.forceContextLoss(); }, }; } 1a:T134a,// Original Motiqo engraving. Four masks share a single GPU texture. export function cardArtwork(back = false, width = 1024) { const height = Math.round(width * 1.4); function layer() { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d', { willReadFrequently: true })!; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, width, height); ctx.scale(width / 1000, height / 1400); ctx.strokeStyle = '#fff'; ctx.fillStyle = '#fff'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; return { ctx, canvas }; } const gold = layer(), ink = layer(), engraving = layer(); const g = gold.ctx, i = ink.ctx, e = engraving.ctx; function box( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number, line = 2, ) { ctx.lineWidth = line; ctx.beginPath(); ctx.roundRect(x, y, w, h, r); ctx.stroke(); } function text( ctx: CanvasRenderingContext2D, value: string, y: number, size: number, spacing: number, family = 'Georgia', ) { ctx.font = `${size}px ${family}`; ctx.textBaseline = 'middle'; const chars = [...value], sizes = chars.map((c) => ctx.measureText(c).width); let x = 500 - (sizes.reduce((a, b) => a + b, 0) + (chars.length - 1) * spacing) / 2; chars.forEach((c, n) => { ctx.fillText(c, x, y); x += sizes[n] + spacing; }); } for (const [offset, line] of [ [20, 3], [31, 1], [43, 3], [54, 1], [75, 2], ] as const) { box( g, offset, offset, 1000 - offset * 2, 1400 - offset * 2, 42 - offset * 0.17, line, ); } // A beaded edge and interrupted traces give the frame a printed, physical scale. for (let y = 70; y < 1330; y += 12) for (const x of [63, 937]) { g.beginPath(); g.arc(x, y, 1.6, 0, Math.PI * 2); g.fill(); } for (let x = 82; x < 920; x += 12) for (const y of [63, 1337]) { g.beginPath(); g.arc(x, y, 1.6, 0, Math.PI * 2); g.fill(); } for (const [x, y] of [ [52, 52], [948, 52], [52, 1348], [948, 1348], ]) { for (const radius of [9, 16, 23]) { g.lineWidth = radius === 16 ? 3 : 1; g.beginPath(); g.arc(x, y, radius, 0, Math.PI * 2); g.stroke(); } } box(g, 116, 102, 768, 121, 15, 3); box(g, 128, 114, 744, 97, 9, 1); text(g, 'MOTIQO', 163, 48, 16); for (const x of [146, 854]) { g.beginPath(); g.moveTo(x, 148); g.lineTo(x + 7, 163); g.lineTo(x, 178); g.lineTo(x - 7, 163); g.closePath(); g.stroke(); } box(g, 116, 1123, 768, 159, 17, 3); box(g, 128, 1135, 744, 135, 10, 1); text( g, back ? 'CURIOUS BY DESIGN' : 'MADE TO MOVE', 1192, back ? 30 : 40, back ? 5 : 9, ); text(i, 'INDEPENDENT MOTION COLLECTION', 1156, 9, 3, 'monospace'); text( i, back ? 'KEEP THE GOOD ONES CLOSE' : 'SMALL DETAILS. STRONG IMPRESSIONS.', 1240, 10, 2.3, 'monospace', ); text(i, 'EXPERIMENT NO. 006', 1312, 10, 3, 'monospace'); // Nested arch traces echo the window without borrowing the reference artwork. for (let n = 0; n < 6; n++) { const r = 360 + n * 5, bottom = 1088 + n * 3; g.lineWidth = n === 0 ? 4 : n === 3 ? 2 : 0.85; g.beginPath(); g.moveTo(500 - r, bottom); g.lineTo(500 - r, 622); g.arc(500, 622, r, Math.PI, Math.PI * 2); g.lineTo(500 + r, bottom); g.lineTo(500 - r, bottom); g.stroke(); } for (let n = 0; n < 23; n++) { const r = 120 + n * 19; e.lineWidth = 0.7; e.beginPath(); for (let j = 0; j <= 240; j++) { const a = (j / 240) * Math.PI * 2, w = r + 7 * Math.sin(a * 11 + n * 0.37); const x = 500 + Math.cos(a) * w, y = 704 + Math.sin(a) * w; if (j) e.lineTo(x, y); else e.moveTo(x, y); } e.closePath(); e.stroke(); } if (back) { for (const r of [196, 210, 240, 256, 272]) { g.lineWidth = r === 240 ? 3 : 1; g.beginPath(); g.arc(500, 704, r, 0, Math.PI * 2); g.stroke(); } g.lineWidth = 6; for (let n = 0; n < 4; n++) { g.beginPath(); g.arc(500, 704, 90 + n * 26, (n * Math.PI) / 2, (n * Math.PI) / 2 + 1.1); g.stroke(); } text(i, 'A LITTLE MOTION / A LOT OF CHARACTER', 1023, 12, 2, 'monospace'); } const blurred = layer(); blurred.ctx.setTransform(1, 0, 0, 1, 0, 0); blurred.ctx.filter = `blur(${width / 700}px)`; blurred.ctx.drawImage(gold.canvas, 0, 0); const masks = [gold, blurred, ink, engraving].map( (l) => l.ctx.getImageData(0, 0, width, height).data, ); const data = new Uint8Array(width * height * 4); for (let p = 0; p < data.length; p += 4) for (let c = 0; c < 4; c++) data[p + c] = masks[c][p]; return { data, width, height }; } 1b:T1c16,// All shader code is authored for Motiqo. No reference-site source is bundled. export const surfaceVertex = ` varying vec2 vUv; varying vec3 vNormal; varying vec3 vView; void main(){vUv=uv; vec4 mv=modelViewMatrix*vec4(position,1.); vView=-mv.xyz; vNormal=normalize(normalMatrix*normal); gl_Position=projectionMatrix*mv;}`; const noise = ` float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);} float noise2(vec2 p){vec2 i=floor(p),f=fract(p); f=f*f*(3.-2.*f); return mix(mix(hash(i),hash(i+vec2(1.,0.)),f.x),mix(hash(i+vec2(0.,1.)),hash(i+1.),f.x),f.y);} float fbm(vec2 p){float s=0.,a=.5; for(int i=0;i #include }`; export const screenVertex = `varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position.xy,1.,1.);}`; export const atmosphereFragment = ` uniform sampler2D uBackdrop,uDrift; uniform float uTime,uAspect,uImageAspect,uHasDrift,uImageReady; uniform vec2 uPointer; varying vec2 vUv; ${noise} void main(){ vec2 uv=vUv; vec2 offset=texture2D(uDrift,uv).xy*uHasDrift; vec2 p=(uv-.5)*vec2(uAspect,1.); p-=offset*.22; vec2 q=vec2(fbm(p*2.+vec2(0.,-uTime*.035)),fbm(p*2.+vec2(5.4,uTime*.028))); float cloud=fbm(p*3.+q*2.6+vec2(.0,-uTime*.05)); float wisps=fbm(p*7.+q*3.2+vec2(uTime*.02,0.)); float smoke=pow(smoothstep(.46,.82,cloud),1.65)*(.3+wisps*.9); float angle=atan(p.y,p.x),radius=length(p); float rays=pow(max(0.,sin(angle*46.+fbm(vec2(angle*7.,uTime*.03))*4.)),13.); vec2 img=(uv-.5)*vec2(min(1.,uAspect/uImageAspect),min(1.,uImageAspect/uAspect))+.5; img+=uPointer*.006+offset*.045; vec3 photo=texture2D(uBackdrop,img).rgb;float gray=dot(photo,vec3(.2126,.7152,.0722)); vec3 col=vec3(.0018,.0025,.0036)+vec3(.027,.020,.019)*pow(gray,1.3)*uImageReady; float side=smoothstep(-.65,.7,p.x); col+=mix(vec3(.075,.051,.037),vec3(.062,.077,.10),side)*smoke*1.35; col+=mix(vec3(.32,.17,.08),vec3(.19,.22,.27),side)*rays*.13*smoothstep(.1,.8,radius)*(.3+smoke); float glow=exp(-dot(p-vec2(.12,.1),p-vec2(.12,.1))*3.); col+=vec3(.009,.005,.003)*glow; col*=1.-.5*smoothstep(.12,1.,length(uv-.5)); col+=hash(gl_FragCoord.xy)*.0008; gl_FragColor=vec4(col,1.); #include }`; export const interiorFragment = ` uniform float uTime; varying vec2 vUv; void main(){vec2 p=(vUv-vec2(.5,.535))*vec2(2.5,3.5);float r=length(p),a=atan(p.y,p.x); float circles=pow(.5+.5*cos(r*73.),24.)*(1.-smoothstep(.1,1.2,r)); float spokes=pow(.5+.5*cos(a*28.+sin(r*3.-uTime*.1)*.1),90.); float ring=exp(-pow((r-.73)/.012,2.)); vec3 col=vec3(.0015,.0024,.0038)+vec3(.037,.026,.015)*(circles*.2+spokes*.12+ring*.6); col+=vec3(.011,.007,.004)*exp(-r*r*4.); gl_FragColor=vec4(col,1.); #include }`; export const driftFragment = ` uniform sampler2D uField;uniform vec2 uPointer,uVelocity;uniform float uDt,uActive;varying vec2 vUv; void main(){vec2 field=texture2D(uField,vUv).xy; vec2 upstream=vUv-field*uDt*.18; field=texture2D(uField,upstream).xy*exp(-uDt*.9); float brush=exp(-dot(vUv-uPointer,vUv-uPointer)/.006)*uActive; field+=uVelocity*brush*.2; gl_FragColor=vec4(clamp(field,vec2(-.65),vec2(.65)),0.,1.);}`; export const threadVertex = ` uniform float uTime,uThreadHover,uThreadRadius; uniform vec2 uThreadPointer,uViewport; varying vec3 vPos; varying float vHover; void main(){ vec3 p=position;p.y+=sin(p.x*.6+uTime*.22+p.z)*.025;vPos=p; vec4 clip=projectionMatrix*modelViewMatrix*vec4(p,1.); vec2 pixel=(clip.xy/clip.w*.5+.5)*uViewport; vec2 separation=pixel-uThreadPointer*uViewport; float radiusSquared=dot(separation,separation)/(uThreadRadius*uThreadRadius); float influence=pow(max(0.,1.-radiusSquared),3.); // A smooth finite lens parts the filaments without a sharp kink at its edge. clip.xy+=separation*(1.25*uThreadHover*influence)/uViewport*2.*clip.w; vHover=uThreadHover*influence;gl_Position=clip;}`; export const threadFragment = `uniform float uTime;varying vec3 vPos;varying float vHover; void main(){float glint=pow(.5+.5*sin(vPos.x*1.5-uTime*.45+vPos.z*5.),12.); vec3 c=mix(vec3(.23,.12,.055),vec3(.65,.55,.43),.5+.5*sin(vPos.z*4.)); gl_FragColor=vec4(c*(.5+glint*1.5+vHover*.65),.19+glint*.16+vHover*.12);}`; export const particleVertex = `uniform float uTime,uPixelRatio;attribute float aSize;attribute float aSeed;varying float vSeed; void main(){vec3 p=position;p.y+=sin(uTime*.16+aSeed*30.)*.13;p.x+=sin(uTime*.11+aSeed*8.)*.06; vec4 mv=modelViewMatrix*vec4(p,1.);gl_Position=projectionMatrix*mv;gl_PointSize=min(18.,aSize*uPixelRatio*6./max(1.,-mv.z));vSeed=aSeed;}`; export const particleFragment = `uniform float uTime;varying float vSeed; void main(){float d=length(gl_PointCoord-.5);float a=exp(-d*d*30.)*(.4+.6*pow(.5+.5*sin(uTime*.55+vSeed*40.),3.)); gl_FragColor=vec4(mix(vec3(.65,.35,.17),vec3(.8,.79,.69),vSeed),a);}`; 1c:T959, b:["$","$L17",null,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"gilded-signal":[{"name":"gilded-card.tsx","code":"$18"},{"name":"gilded-scene.ts","code":"$19"},{"name":"gilded-artwork.ts","code":"$1a"},{"name":"gilded-shaders.ts","code":"$1b"},{"name":"Isotype.svg","code":"$1c"}]},"initialElement":"gilded-signal","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"Interactive","initialGroup":"$undefined","initialFree":false}]