Generative Art

# Visual style: Generative Art

Algorithm-driven procedural visual aesthetics using mathematical functions, noise textures, and parametric graphics to create unique dynamic interfaces. Ideal for creative coding, data visualization, and art projects.

## Philosophy
Generative Art style originates from creative coding and algorithmic aesthetics, where every visual element is generated by mathematical functions and procedural rules.

Core principles:
- Algorithm-driven: colors, shapes, and textures are generated through mathematical functions, not hand-drawn
- Parametric design: output is controlled through seed values, iteration counts, and other parameters
- Order within chaos: Perlin noise, fractals, and particle systems create the intersection of nature and mathematics
- Code as art: monospace fonts and parameter labels hint at the underlying code nature
- Dark canvas: near-black backgrounds make algorithmically generated colors more striking

## Do
- Use near-black backgrounds bg-[#0a0a0a] or bg-neutral-950
- Use HSL rotation to generate algorithmic palettes, with violet #7c3aed as base
- All text uses font-mono monospace fonts
- Use SVG geometric patterns (circles, lines, curve grids) as decorative backgrounds
- Display parameter elements: seed values, coordinates, iteration counts, etc.
- Use mathematical easing functions to drive animations
- Cards use bg-neutral-900/80 backdrop-blur dark glass effect
- Interactive elements use violet glow shadow-[0_0_20px_rgba(124,58,237,0.4)]
- Interaction feedback stays linear and precise (ease-linear + duration-200)

## Don't
- Do not use images or raster bitmaps
- Do not use traditional UI patterns (unless algorithmically transformed)
- Do not use static, lifeless layouts
- Do not use more than 5 colors without algorithmic justification
- Do not use decorative elements that are not procedurally derived
- Do not use light/white backgrounds
- Do not use serif or sans fonts (must use monospace)
- Do not use spring, bounce, or other skeuomorphic elastic animations

## Rules for the AI
STYLE: Generative Art
TYPE: Algorithm-driven visual aesthetics

MUST USE:
- Dark background: bg-[#0a0a0a] or bg-neutral-950
- Primary accent: Violet/purple (#7c3aed) as base generative color
- Color palette: Algorithmically derived via HSL rotation from violet base
- Monospace fonts: font-mono for all text (code-art aesthetic)
- SVG geometric shapes as decorative backgrounds
- Dark glass cards: bg-neutral-900/80 backdrop-blur with subtle borders
- Violet glow: shadow-[0_0_20px_rgba(124,58,237,0.4)] for interactive elements
- Parameter display: Show seed values, coordinates, algorithm names as UI elements

MUST AVOID:
- Stock photos or raster images
- Light/white backgrounds
- Serif or sans-serif fonts
- Conventional shadows (shadow-md)
- Static lifeless layouts
- Decorative elements that are not procedurally derived

Animation & Interaction Rules:
- Algorithmic Flow: Interactions should reflect parameter computation, simulating noise flow through grid or gradient layer linear displacement.
- Parameter Shifting: On hover, slightly adjust letter-spacing and marker shapes (e.g., square dot rotation), hinting at seed/parameter changes without being flashy.
- Exact Precision: Prefer ease-linear with duration-200, maintaining programmatic, predictable feedback rhythm.
- Mathematical Glow: Glow should have clear geometric edges, avoiding excessive fogging that blurs information hierarchy.