Aura---Architecting-Digital-Frontiers-DESIGN.mdFeatured

Aura - Architecting Digital Frontiers

Aura Architecting Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

HTML Preview

Aura---Architecting-Digital-Frontiers.html

DESIGN.md

Prompt context source

Frontmatter	Value
version	"alpha"
name	"Aura - Architecting Digital Frontiers"
description	"Aura Architecting Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments."
colors	token group
primary	"#F97316"
secondary	"#000000"
tertiary	"#E6FF1A"
neutral	"#000000"
background	"#000000"
surface	"#FFFFFF"
text-primary	"#FFFFFF"
text-secondary	"#000000"
border	"#FFFFFF"
accent	"#F97316"
typography	token group
display-lg	token group
body-md	token group
label-md	token group
rounded	token group
md	"0px"
full	"9999px"
spacing	token group
base	"6px"
sm	"1px"
md	"6px"
lg	"8px"
xl	"14px"
gap	"6px"
card-padding	"24px"
section-padding	"24px"
components	token group
button-primary	token group
button-link	token group

Overview

Composition cues:
- Layout: Grid
- Content Width: Bounded
- Framing: Glassy
- Grid: Strong

Colors

The color system uses dark mode with #F97316 as the main accent and #000000 as the neutral foundation.

Primary (#F97316): Main accent and emphasis color.
Secondary (#000000): Supporting accent for secondary emphasis.
Tertiary (#E6FF1A): Reserved accent for supporting contrast moments.
Neutral (#000000): Neutral foundation for backgrounds, surfaces, and supporting chrome.
Usage: Background: #000000; Surface: #FFFFFF; Text Primary: #FFFFFF; Text Secondary: #000000; Border: #FFFFFF; Accent: #F97316

Typography

Typography pairs DM Sans for display hierarchy with Inter for supporting content and interface copy.

Display (display-lg): DM Sans, 96px, weight 200, line-height 96px, letter-spacing -0.025em.
Body (body-md): Inter, 16px, weight 200, line-height 24px.
Labels (label-md): Inter, 12px, weight 200, line-height 16px.

Layout

Layout follows a grid composition with reusable spacing tokens. Preserve the grid, bounded structural frame before changing ornament or component styling. Use 6px 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 / bounded composition, and keep that framing stable when adding or remixing sections.

Layout type: Grid
Content width: Bounded
Base unit: 6px
Scale: 1px, 6px, 8px, 14px, 16px, 24px, 32px, 48px
Section padding: 24px, 64px, 112px
Card padding: 24px
Gaps: 6px, 8px, 12px, 20px

Elevation & Depth

Depth is communicated through glass, 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 glass first, with borders, shadows, and blur only reinforcing that material choice.

Surface style: Glass
Borders: 1px #FFFFFF
Shadows: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 20px 0px
Blur: 4px

Shapes

Shapes rely on a tight radius system anchored by 2px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.

Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.

Corner radii: 2px, 9999px
Icon treatment: Linear
Icon sets: Solar

Components

Anchor interactions to the detected button styles.

Buttons

Primary: background #000000, text #FFFFFF, radius 9999px, padding 8px, border 0px solid rgb(229, 231, 235).
Links: text #FFFFFF, radius 0px, padding 0px, border 0px solid rgb(229, 231, 235).

Iconography

Treatment: Linear.
Sets: Solar.

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 6px rhythm.
Do reuse the Glass surface treatment consistently across cards and controls.
Do keep corner radii within the detected 2px, 9999px family.

Don't

Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
Don't mix unrelated shadow or blur recipes that break the current depth system.
Don't exceed the detected moderate motion intensity without a deliberate reason.

Motion

Motion feels controlled and interface-led across text, layout, and section transitions. Timing clusters around 150ms and 300ms. Easing favors ease and cubic-bezier(0.4. Hover behavior focuses on text and color changes. Scroll choreography uses GSAP ScrollTrigger for section reveals and pacing.

Motion Level: moderate

Durations: 150ms, 300ms, 700ms

Easings: ease, cubic-bezier(0.4, 0, 0.2, 1)

Hover Patterns: text, color, grayscale

Scroll Patterns: gsap-scrolltrigger

WebGL

Reconstruct the graphics as a full-bleed background field using webgl, renderer, alpha, dpr clamp, custom shaders. The effect should read as technical, meditative, and atmospheric: dot-matrix particle field with black and sparse spacing. Build it from dot particles + soft 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: Dot-matrix particle field
Primitives:
- Value: Dot particles + soft depth fade
Motion:
- Value: Slow breathing pulse
Interaction:
- Value: Pointer-reactive drift
Render:
- Value: WebGL, Renderer, alpha, DPR clamp, custom shaders

Techniques: Dot matrix, Breathing pulse, Pointer parallax, Shader gradients, Noise fields

Code Evidence:

HTML reference:

Language: html

Snippet:

<!-- WebGL Background -->
<canvas id="webgl-canvas" class="fixed inset-0 z-0 pointer-events-none w-full h-full"></canvas>

<!-- Framed Grid Environment: Background lines & Container bounds -->

JS reference:

Language: html

Snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

ThreeJS

Reconstruct the Three.js layer as a full-bleed background field with layered spatial depth that feels technical. Use alpha, dpr clamp renderer settings, orthographic projection, plane geometry, shadermaterial materials, and ambient + key + rim 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 with layered spatial depth
Render:
- Value: alpha, DPR clamp
Camera:
- Value: Orthographic projection
Lighting:
- Value: ambient + key + rim
Materials:
- Value: ShaderMaterial
Geometry:
- Value: plane
Motion:
- Value: Slow orbital drift

Techniques: Shader materials, Timeline beats, alpha, DPR clamp, Poster frame + DOM fallback

Code Evidence:

HTML reference:

Language: html

Snippet:

<!-- WebGL Background -->
<canvas id="webgl-canvas" class="fixed inset-0 z-0 pointer-events-none w-full h-full"></canvas>

<!-- Framed Grid Environment: Background lines & Container bounds -->

JS reference:

Language: html

Snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>