bright-green-tech-system-webgl

Bright Green Tech System WebGL Skill

Use When

• Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

Workflow

Scope

• Apply this as a full design-system direction across layout, framing, typography, controls, metadata, and the embedded WebGL visualization region.
• Use it when the interface should feel sharply technical, experimental, and structured, with a bright green signal color and a visible real-time visual engine.
• This is not generic dark SaaS and not soft glassmorphism. It should feel like an active synthesis console or build-system interface.

Visual target

• Build the page on a deep charcoal or near-black base with highly visible structure lines, container borders, corner brackets, and internal dividers.
• Use a bright lime, acid green, or signal-green accent as the dominant active color for indicators, progress states, focus details, highlights, and important labels.
• Keep the green vivid and intentional, but limit its usage to signals, focal typography, accent fills, and WebGL highlights rather than flooding every surface.
• Establish a split composition where one side carries content, metadata, and instructions while the other side hosts a WebGL or Three.js visualization zone.
• The WebGL region should feel integrated into the system, not decorative: it should read like a powered instrument panel, synthesized globe, particle engine, or live geometry viewport.

Implementation guidance

• Prefer a strong outer container shell with thin strokes, subtle backdrop blur, visible corner brackets, and a central divider or explicit split between text and visualization.
• Use clean sans-serif typography for main content and mono utility text for labels, status readouts, process steps, percentages, and system metadata.
• Introduce small framed modules, tips panels, progress rails, or status blocks with precise spacing and clear border hierarchy.
• Use masked staggered reveals, fade-up blocks, or controlled sequencing so the layout feels alive but disciplined.
• Treat the WebGL panel as a core component: use real canvas or Three.js rendering when possible, with luminous particles, synthetic geometry, or orbital forms tinted by the bright green accent.
• Keep the visualization atmospheric and premium: additive glow, subtle fog, gentle camera motion, and calm mouse response are good; chaotic motion and noisy overload are not.

Recommended patterns

• Split-screen hero with content and system prompts on the left, immersive WebGL viewport on the right.
• Hard-edged framed container with outer border, inset dividers, and small bracket marks on the corners.
• Mono process navigation using numbered stages, system tags, or compilation steps with one active green state.
• Progress bars, tiny live dots, and status summaries that use bright green as the active operational color.
• WebGL scenes built from luminous particles, planetary structures, node fields, or geometric motion that echo the interface accent color.

Tuning knobs

• Green brightness: keep it vivid and high-energy, but balance it against dark neutrals so the page stays premium.
• Structural density: increase or reduce guides, brackets, dividers, and framed boxes depending on how instrumented the system should feel.
• WebGL prominence: choose whether the visualization is a dominant half-screen feature or a more contained technical panel.
• Motion intensity: keep motion smooth and intentional; tune reveal timing, particle speed, and hover response so the system feels alive without becoming frantic.
• Background texture: use faint diagonal or grid texture to enrich the shell, but keep it secondary to the core structure.

Avoid

• Generic green-on-black hacker aesthetics with no layout discipline.
• Oversaturating the whole UI with bright green until the interface loses hierarchy.
• Treating WebGL as a random hero decoration disconnected from the design system.
• Soft rounded consumer-app styling that fights the sharp framed technical shell.
• Excessively noisy particles, fast motion, or too many glowing layers that reduce legibility.