GenArt
PaletteComponentsAlgorithmsaiRulesPhilosophy
←StyleKit
Algorithm-Driven Visual Aesthetics

Generative
Art.

算法驱动的程序化视觉美学 — Mathematical functions, noise textures, and parametric geometry create unique dynamic interfaces. Every element is derived from code, not craft.

seed:42731iterations:128noise_scale:0.40algo:perlin_v2
∞
Unique Outputs
4
aiRules
16ms
Render Delta
2^31
Seed Space
// color_system

Algorithmic Color System

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.

Violet
#7c3aed
hsl(263,73%,55%)
Primary
Near-Black
#0a0a0a
hsl(0,0%,4%)
Background
Blue
#3b82f6
hsl(217,91%,60%)
Secondary
Teal
#14b8a6
hsl(173,80%,40%)
Tertiary
Rose
#f43f5e
hsl(350,89%,60%)
Highlight
Amber
#f59e0b
hsl(38,92%,50%)
Accent

// hsl_rotation_palette — base: hsl(263, 73%, 55%)

Violet
+0deg
+60° Blue
+60deg
+120° Teal
+120deg
+180° Rose
+180deg
+240° Amber
+240deg
+300° Fuchsia
+300deg
// component_library

Algorithmic Components

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

// algorithm_catalogue

Core Algorithms

Four foundational generative functions. Each produces distinct visual output from identical seed values. Click an algorithm to inspect its parameters.

x: 0.000
Perlin Noise
seed: 42731
Parameters
seed42731
iterations128
noise_scale0.400
algorithm0x01
color_spacehsl_rot
output_w1920
output_h1080
// ai_rules_demo

Interaction Rules

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.

aiRule 01Algorithmic Flow

交互应体现参数计算过程。通过网格或渐变层的线性位移模拟噪点流动。 Grid shifts linearly to simulate noise field displacement.

t: 0000
aiRule 02Parameter Shifting

悬停时轻微调整字距与标记形态(方点旋转45deg→90deg),暗示 seed/参数变化。 Letter-spacing and marker rotation shift on hover.

noise_octaves
4
persistence
0.5
lacunarity
2
amplitude
1
seed: 42
aiRule 03Exact Precision

优先使用 ease-linear + duration-200,保持程序化、可预测的反馈节奏。 Compare: linear (predictable) vs spring (bouncy) vs ease-in-out.

ease-linear / duration-200
Exact Precision — recommended
cubic-bezier(0.34,1.56,0.64,1)
Spring — avoid in this style
ease-in-out / duration-500
Organic — avoid over-softening
aiRule 04Mathematical Glow

发光以清晰几何边缘为主,避免过度雾化。Glow follows sharp geometric boundaries — not diffuse halos. Each shape has a distinct glow signature.

Diamond
Circle
Hex Line
Cross Grid

Hover each shape — glow follows geometric edge, not diffuse halo

// design_rules

Do & Don't

Design rules for Generative Art — derived from the style's algorithm-first philosophy. Deviation breaks the aesthetic contract.

Algorithm First

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.

  • SVG geometry as decoration
  • HSL rotation for palettes
  • Parametric control via seed

Dark Canvas

Near-black amplifies color

bg-[#0a0a0a] is mandatory. The near-black background makes algorithm-generated colors appear luminous, like code on a terminal screen.

  • bg-[#0a0a0a] always
  • Neutral-800 for borders
  • Violet glow on interaction

Mono Typography

font-mono everywhere

Monospace fonts make the interface feel like code output. Every label, number, and heading uses font-mono — no exceptions.

  • font-mono for all text
  • Uppercase tracking labels
  • Coordinate and param display

Do

  • bg-[#0a0a0a] or bg-neutral-950 — dark canvas always
  • font-mono for all text — code-art aesthetic
  • HSL rotation palette from violet #7c3aed base
  • SVG geometric shapes as procedural decoration
  • Show seed, coordinates, iteration counts as UI
  • ease-linear + duration-200 for exact precision
  • bg-neutral-900/80 backdrop-blur dark glass cards
  • shadow-[0_0_20px_rgba(124,58,237,0.4)] violet glow
  • Dot grid or line grid as background texture

Don't

  • No images or raster bitmaps — SVG only
  • No light or white backgrounds — breaks the aesthetic
  • No serif or sans-serif fonts — monospace only
  • No conventional shadows (shadow-md, shadow-lg)
  • No static lifeless layouts — everything must move
  • No spring/bounce easing — ease-linear is the standard
  • No more than 5 colors without algorithmic justification
  • No decorative elements not procedurally derived
  • No over-fogged glow — keep geometric edge clarity
// feature_set

Built with Precision

Parametric Control

Seed, iterations, scale — every visual output is reproducible and controllable via numeric parameters.

HSL Rotation Palette

Six accent colors derived by rotating 60 degrees around the HSL wheel from violet base. Mathematically justified.

SVG Geometry Only

No raster images. All decoration is procedural SVG — circles, lines, polygons derived from mathematical forms.

Dark Glass Morphism

bg-neutral-900/80 with backdrop-blur. Cards feel like frosted dark glass — translucent, not opaque.

Exact Linear Timing

ease-linear at duration-200 for all interactions. Predictable, programmable, machine-like precision.

Parameter Display

UI elements surface algorithm state — seed values, coordinates, iteration counts. The interface is the debugger.

GenArt

Algorithm-driven visual aesthetics through mathematical functions, noise textures, and parametric geometry.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteVioletNear-BlackBlueTealRoseAmber
GenArt Style — StyleKit|seed: 42731|iter: 128
Back to StyleKit→