← Back to Skills / Marketplace / shader-lines
SKL · 12PRO

Shader Lines.

A glowing animated background of chunky pixelated light rings radiating from a near-black center — an 8-bit, retro-digital hero backdrop with zero shader code on your end.

UNLOCK WITH PRO →
● Live preview · Shader Lines demo
● This is a real WebGL shader, not a screenshot
↗ New tab
01 · The Vibe

Shader Lines is a glowing animated background made of pixelated light — radial rings of light radiating from the center, broken up into chunky mosaic blocks with a subtle retro shimmer. It's the pixelated cousin of a smooth shader glow: same near-black background and luminous color, but quantized into a grid that gives it an 8-bit, digital, slightly nostalgic feel. It's a real-time shader, so the light actually ripples and shifts on its own, and white text sits cleanly on top. This is the skill for a hero background that feels both high-tech and a little retro at the same time.

● Looks Like
Retro arcade attract screens that grew upGlitchy music visualizersThe pixel-light intros in tech product reels8-bit aesthetics rebuilt with modern polishThe kind of dark hero section that looks like it's powered by something
02 · Best For / Avoid If
＋ Best For
+Hero sections for landing pages and product sites
+AI, gaming, and tech products that want a digital, slightly retro edge
+Music, audio, and creative tool sites
+Launch pages and waitlist screens that need a striking entrance
+Portfolio sites with a technical or experimental personality
+Any dark-themed page where you want a background with more texture and character than a smooth gradient
× Avoid If
×Your design is light or minimal — Shader Lines lives on a near-black background and won't fit a bright, airy look
×Your brand is polished and corporate — the pixelated, retro texture leans playful and experimental
×You need top performance on low-end devices — real-time shaders use the GPU and can drain battery on phones
×Your page is content-heavy and a glowing animated background would pull focus from what matters
03 · Design Philosophy
01

The pixel grid is the personality

What makes Shader Lines its own thing is the mosaic — the glow gets quantized into chunky blocks instead of smooth lines. That pixelation is the signature, and how big you make those blocks completely changes the feel, from fine and subtle to big, blocky, and unapologetically retro. The chunkiness is the main dial worth playing with.

02

Dark background, glowing center

The effect works because the background is nearly black, which gives the glowing pixel rings something to shine against. The light radiates from the center and fades into the dark edges, which naturally draws the eye inward and keeps white overlay text readable. Keep the surrounding design dark so the glow stays the star.

03

Color sets the mood

The default is a cool blue-white shimmer, and the tinted versions glow a single color — cyan, gold, magenta, green, or silver. The palette you pick sets the entire emotional tone of the page before anyone reads a word, so choose the one that matches the feeling you're after.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Text sitting on the bright center
The glow is strongest in the middle, which is exactly where headlines tend to go. Add a subtle dark gradient behind your text, or shift the copy slightly off the brightest zone so it stays readable.
! WARNING
Going too blocky for the context
Big chunky pixels look amazing for retro and gaming vibes, but they can feel too casual for a serious product. Match the mosaic size to your brand — finer pixels read more premium, bigger ones read more playful.
! WARNING
Performance on mobile
Real-time shaders run on the GPU and can heat up phones or drain battery. Tone the effect down or pause it on mobile, and always respect reduced-motion settings by freezing it to a still frame.
! WARNING
Using it behind everything
Shader Lines is a hero moment, not a whole-site background. Putting it behind every section tires the eye and kills the impact of the one place it actually lands.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →