---
version: "alpha"
name: "Aura - Fluid Drag Interactions"
description: "Aura Fluid Dashboard Section is designed for demonstrating application workflows and interface hierarchy. Key features include clear information density, modular panels, and interface rhythm. It is suitable for product showcases, admin panels, and analytics experiences."
colors:
  primary: "#9B32F1"
  secondary: "#1E74C8"
  tertiary: "#FB923C"
  neutral: "#E5E7EB"
  background: "#E5E7EB"
  surface: "#000000"
  text-primary: "#FFFFFF"
  text-secondary: "#9CA3AF"
  border: "#FFFFFF"
  accent: "#9B32F1"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "110px"
    fontWeight: 600
    lineHeight: "110px"
    letterSpacing: "-0.05em"
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: "16.5px"
    letterSpacing: "0.2em"
spacing:
  base: "4px"
  sm: "1px"
  md: "3px"
  lg: "4px"
  xl: "12px"
  gap: "8px"
  card-padding: "12px"
  section-padding: "24px"
components:
  card:
    backgroundColor: "#F2F6F9"
    rounded: "8px"
    padding: "12px"
---

## Overview

- **Composition cues:**
  - Layout: Grid
  - Content Width: Full Bleed
  - Framing: Glassy
  - Grid: Strong

## Colors

The color system uses dark mode with #9B32F1 as the main accent and #E5E7EB as the neutral foundation.

- **Primary (#9B32F1):** Main accent and emphasis color.
- **Secondary (#1E74C8):** Supporting accent for secondary emphasis.
- **Tertiary (#FB923C):** Reserved accent for supporting contrast moments.
- **Neutral (#E5E7EB):** Neutral foundation for backgrounds, surfaces, and supporting chrome.

- **Usage:** Background: #E5E7EB; Surface: #000000; Text Primary: #FFFFFF; Text Secondary: #9CA3AF; Border: #FFFFFF; Accent: #9B32F1

- **Gradients:** bg-gradient-to-r from-white to-white/40, bg-gradient-to-b from-[#F5F5F7] to-[#AFAFB6], bg-gradient-to-br from-[#2D3AE4] to-[#161D8A], bg-gradient-to-br from-[#E2DDFB] to-[#FDFDFD]

## Typography

Typography relies on Plus Jakarta Sans across display, body, and utility text.

- **Display (`display-lg`):** Plus Jakarta Sans, 110px, weight 600, line-height 110px, letter-spacing -0.05em.
- **Body (`body-md`):** Plus Jakarta Sans, 11px, weight 600, line-height 16.5px, letter-spacing 0.2em.

## 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:** 1px, 3px, 4px, 12px, 16px, 24px, 32px, 38px
- **Section padding:** 24px, 28px, 32px, 36px
- **Card padding:** 12px, 24px, 32px
- **Gaps:** 8px

## 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; 6px #D9B5CA
- **Shadows:** rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 20px 50px 0px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 15px 0px
- **Blur:** 12px

### Techniques
- **Gradient border shell:** Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 26px padding and a 40px 40px 0px 0px radius. Drive the shell with linear-gradient(rgb(242, 251, 255), rgb(213, 245, 255)) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.

## Shapes

Shapes rely on a tight radius system anchored by 24px 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:** 24px, 32px, 9999px
- **Icon treatment:** Linear
- **Icon sets:** Solar

## Components

Reuse the existing card surface recipe for content blocks.

### Cards and Surfaces
- **Card surface:** background #F2F6F9, border 0px solid rgb(229, 231, 235), radius 8px, padding 12px, shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px.
- **Card surface:** border 0px solid rgb(229, 231, 235), radius 40px 40px 0px 0px, padding 26px, shadow none.

### 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 4px rhythm.
- Do reuse the Glass surface treatment consistently across cards and controls.
- Do keep corner radii within the detected 24px, 32px, 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 minimal motion intensity without a deliberate reason.

## Motion

Motion stays restrained and interface-led across text, layout, and scroll transitions. Timing clusters around 300ms. Easing favors ease and cubic-bezier(0.4. Hover behavior focuses on color and transform changes.

**Motion Level:** minimal

**Durations:** 300ms

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

**Hover Patterns:** color, transform

## WebGL

Reconstruct the graphics as a full-bleed background field using webgl, renderer, alpha, dpr clamp, custom shaders. The effect should read as retro-futurist, technical, and meditative: dot-matrix particle field with green on 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:**
      ```html
      <!-- WebGL Canvas for Dot Matrix Particle Field -->
      <canvas id="webgl-canvas" class="fixed inset-0 z-[1] pointer-events-none"></canvas>

      <!-- Directive: Framed Grid Layout -->
      ```
  - **JS reference:**
    - **Language:** js
    - **Snippet:**
      ```
      // --- WebGL Background: Dot Matrix Pulse ---
      const canvas = document.getElementById('webgl-canvas');

      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      …
      ```
  - **Renderer setup:**
    - **Language:** js
    - **Snippet:**
      ```
      // --- WebGL Background: Dot Matrix Pulse ---
      const canvas = document.getElementById('webgl-canvas');

      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      ```
  - **Draw call:**
    - **Language:** js
    - **Snippet:**
      ```
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 100;

      const vertexShader = `
          uniform float uTime;
          attribute float aOffset;
          varying float vAlpha;
          void main() {
      …
      ```

## ThreeJS

Reconstruct the Three.js layer as a full-bleed background field with layered spatial depth that feels retro-futurist, volumetric, and technical. Use alpha, dpr clamp renderer settings, perspective, ~45deg fov, custom buffer geometry 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:** Perspective, ~45deg FOV
  - **Lighting:**
    - **Value:** ambient + key + rim
  - **Materials:**
    - **Value:** ShaderMaterial
  - **Geometry:**
    - **Value:** custom buffer geometry
  - **Motion:**
    - **Value:** Slow orbital drift

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

**Code Evidence:**
  - **HTML reference:**
    - **Language:** html
    - **Snippet:**
      ```html
      <!-- WebGL Canvas for Dot Matrix Particle Field -->
      <canvas id="webgl-canvas" class="fixed inset-0 z-[1] pointer-events-none"></canvas>

      <!-- Directive: Framed Grid Layout -->
      ```
  - **JS reference:**
    - **Language:** js
    - **Snippet:**
      ```
      // --- WebGL Background: Dot Matrix Pulse ---
      const canvas = document.getElementById('webgl-canvas');

      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      …
      ```
  - **Renderer setup:**
    - **Language:** js
    - **Snippet:**
      ```
      // --- WebGL Background: Dot Matrix Pulse ---
      const canvas = document.getElementById('webgl-canvas');

      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      ```
  - **Draw call:**
    - **Language:** js
    - **Snippet:**
      ```
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 100;

      const vertexShader = `
          uniform float uTime;
          attribute float aOffset;
          varying float vAlpha;
          void main() {
      …
      ```