--- version: "alpha" name: "Minimalist Event Launch" description: "Minimalist Event Heading Component is designed for building reusable UI components in modern web projects. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for component libraries and responsive product interfaces." colors: primary: "#6B7280" secondary: "#9CA3AF" tertiary: "#1F2937" neutral: "#D1D5DB" background: "#D1D5DB" surface: "#D1D5DB" text-primary: "#6B7280" text-secondary: "#9CA3AF" accent: "#6B7280" typography: display-lg: fontFamily: "Inter" fontSize: "112px" fontWeight: 100 lineHeight: "112px" letterSpacing: "-0.05em" textTransform: "uppercase" body-md: fontFamily: "Inter" fontSize: "14px" fontWeight: 300 lineHeight: "20px" letterSpacing: "0.1em" textTransform: "lowercase" spacing: base: "4px" sm: "4px" md: "16px" lg: "64px" section-padding: "64px" --- ## Overview - **Composition cues:** - Layout: Grid - Content Width: Full Bleed - Framing: Open - Grid: Strong ## Colors The color system uses dark mode with #6B7280 as the main accent and #D1D5DB as the neutral foundation. - **Primary (#6B7280):** Main accent and emphasis color. - **Secondary (#9CA3AF):** Supporting accent for secondary emphasis. - **Tertiary (#1F2937):** Reserved accent for supporting contrast moments. - **Neutral (#D1D5DB):** Neutral foundation for backgrounds, surfaces, and supporting chrome. - **Usage:** Background: #D1D5DB; Surface: #D1D5DB; Text Primary: #6B7280; Text Secondary: #9CA3AF; Accent: #6B7280 ## Typography Typography relies on Inter across display, body, and utility text. - **Display (`display-lg`):** Inter, 112px, weight 100, line-height 112px, letter-spacing -0.05em, uppercase. - **Body (`body-md`):** Inter, 14px, weight 300, line-height 20px, letter-spacing 0.1em, lowercase. ## Layout Layout follows a grid composition with reusable spacing tokens. Preserve the grid, full bleed structural frame before changing ornament or component styling. Use 4px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values. Treat the page as a grid / full bleed composition, and keep that framing stable when adding or remixing sections. - **Layout type:** Grid - **Content width:** Full Bleed - **Base unit:** 4px - **Scale:** 4px, 16px, 64px - **Section padding:** 64px ## Elevation & Depth Depth is communicated through flat, border contrast, and reusable shadow or blur treatments. Keep those recipes consistent across hero panels, cards, and controls so the page reads as one material system. Surfaces should read as flat first, with borders, shadows, and blur only reinforcing that material choice. - **Surface style:** Flat ## Do's and Don'ts Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles. ### Do - Do use the primary palette as the main accent for emphasis and action states. - Do keep spacing aligned to the detected 4px rhythm. - Do reuse the Flat surface treatment consistently across cards and controls. ### Don't - Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state. - Don't exceed the detected minimal motion intensity without a deliberate reason. ## Motion Motion stays restrained and interface-led across text, layout, and scroll transitions. Easing favors ease. Scroll choreography uses Parallax for section reveals and pacing. **Motion Level:** minimal **Easings:** ease **Scroll Patterns:** parallax ## WebGL Reconstruct the graphics as a full-bleed background field using webgl, renderer, antialias, dpr clamp. The effect should read as retro-futurist, technical, and meditative: perspective grid field with green on black and sparse spacing. Build it from grid lines + depth fade so the effect reads clearly. Animate it as slow breathing pulse. Interaction can react to the pointer, but only as a subtle drift. Preserve dom fallback. **Id:** webgl **Label:** WebGL **Stack:** ThreeJS, WebGL **Insights:** - **Scene:** - **Value:** Full-bleed background field - **Effect:** - **Value:** Perspective grid field - **Primitives:** - **Value:** Grid lines + depth fade - **Motion:** - **Value:** Slow breathing pulse - **Interaction:** - **Value:** Pointer-reactive drift - **Render:** - **Value:** WebGL, Renderer, antialias, DPR clamp **Techniques:** Perspective grid, Breathing pulse, Pointer parallax, Noise fields, DOM fallback **Code Evidence:** - **HTML reference:** - **Language:** html - **Snippet:** ```html ``` - **JS reference:** - **Language:** js - **Snippet:** ``` // --- Three.js Setup --- const container = document.getElementById('webgl-container'); const scene = new THREE.Scene(); // Match background color precisely with CSS const bgColor = new THREE.Color(0xf2f2f2); scene.background = bgColor; scene.fog = new THREE.Fog(bgColor, 20, 60); ``` - **Renderer setup:** - **Language:** js - **Snippet:** ``` const camZ = window.innerWidth < 768 ? 45 : 35; camera.position.set(0, -5, camZ); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); … ``` - **Scene setup:** - **Language:** js - **Snippet:** ``` // --- Three.js Setup --- const container = document.getElementById('webgl-container'); const scene = new THREE.Scene(); // Match background color precisely with CSS const bgColor = new THREE.Color(0xf2f2f2); ``` ## ThreeJS Reconstruct the Three.js layer as a full-bleed background field that feels retro-futurist and technical. Use antialias, shadows, dpr clamp renderer settings, perspective, ~35deg fov, scene-scaled geometry geometry, meshstandardmaterial materials, and ambient + directional lighting. Motion should read as slow orbital drift, with poster frame + dom fallback. **Id:** threejs **Label:** ThreeJS **Stack:** ThreeJS, WebGL **Insights:** - **Scene:** - **Value:** Full-bleed background field - **Render:** - **Value:** antialias, shadows, DPR clamp - **Camera:** - **Value:** Perspective, ~35deg FOV - **Lighting:** - **Value:** ambient + directional - **Materials:** - **Value:** MeshStandardMaterial - **Geometry:** - **Value:** Scene-scaled geometry - **Motion:** - **Value:** Slow orbital drift **Techniques:** PBR shading, Timeline beats, antialias, shadows, DPR clamp, Poster frame + DOM fallback **Code Evidence:** - **HTML reference:** - **Language:** html - **Snippet:** ```html ``` - **JS reference:** - **Language:** js - **Snippet:** ``` // --- Three.js Setup --- const container = document.getElementById('webgl-container'); const scene = new THREE.Scene(); // Match background color precisely with CSS const bgColor = new THREE.Color(0xf2f2f2); scene.background = bgColor; scene.fog = new THREE.Fog(bgColor, 20, 60); ``` - **Renderer setup:** - **Language:** js - **Snippet:** ``` const camZ = window.innerWidth < 768 ? 45 : 35; camera.position.set(0, -5, camZ); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); … ``` - **Scene setup:** - **Language:** js - **Snippet:** ``` // --- Three.js Setup --- const container = document.getElementById('webgl-container'); const scene = new THREE.Scene(); // Match background color precisely with CSS const bgColor = new THREE.Color(0xf2f2f2); ```