算法驱动的程序化视觉美学 — Mathematical functions, noise textures, and parametric geometry create unique dynamic interfaces. Every element is derived from code, not craft.
Colors generated via HSL rotation from violet base (#7c3aed at hsl(263,73%,55%)). Each accent is a 60-degree hue step. Background stays near-black to maximize perceptual contrast for algorithm-generated visuals.
// hsl_rotation_palette — base: hsl(263, 73%, 55%)
Every component follows Exact Precision timing (ease-linear, 200ms). Dark glass morphism with violet glow on interaction. Monospace font throughout — code is the aesthetic.
// primary — violet glow, ease-linear, duration-200
// accent variants — algorithmic HSL palette
// size variants
Four foundational generative functions. Each produces distinct visual output from identical seed values. Click an algorithm to inspect its parameters.
Four named aiRules define every interaction in Generative Art style. Each rule is demonstrated live below — interact with each demo to feel the precise, algorithmic feedback pattern.
交互应体现参数计算过程。通过网格或渐变层的线性位移模拟噪点流动。 Grid shifts linearly to simulate noise field displacement.
悬停时轻微调整字距与标记形态(方点旋转45deg→90deg),暗示 seed/参数变化。 Letter-spacing and marker rotation shift on hover.
优先使用 ease-linear + duration-200,保持程序化、可预测的反馈节奏。 Compare: linear (predictable) vs spring (bouncy) vs ease-in-out.
发光以清晰几何边缘为主,避免过度雾化。Glow follows sharp geometric boundaries — not diffuse halos. Each shape has a distinct glow signature.
Hover each shape — glow follows geometric edge, not diffuse halo
Design rules for Generative Art — derived from the style's algorithm-first philosophy. Deviation breaks the aesthetic contract.
Code drives every visual
No element is placed by hand. Each shape, color, and position is derived from a mathematical function. The codebase IS the design tool.
Near-black amplifies color
bg-[#0a0a0a] is mandatory. The near-black background makes algorithm-generated colors appear luminous, like code on a terminal screen.
font-mono everywhere
Monospace fonts make the interface feel like code output. Every label, number, and heading uses font-mono — no exceptions.
Seed, iterations, scale — every visual output is reproducible and controllable via numeric parameters.
Six accent colors derived by rotating 60 degrees around the HSL wheel from violet base. Mathematically justified.
No raster images. All decoration is procedural SVG — circles, lines, polygons derived from mathematical forms.
bg-neutral-900/80 with backdrop-blur. Cards feel like frosted dark glass — translucent, not opaque.
ease-linear at duration-200 for all interactions. Predictable, programmable, machine-like precision.
UI elements surface algorithm state — seed values, coordinates, iteration counts. The interface is the debugger.