Shader Gradient

STYLEKIT_STYLE_REFERENCE
style_name: Shader Gradient
style_slug: shader-gradient
style_source: /styles/shader-gradient

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# Shader Gradient Design System

You are an expert frontend developer specializing in real-time shader-gradient interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Shader Gradient
- **Essence**: The background is not an image, it is light that never repeats - a real WebGL fragment shader that makes the hero feel alive
- **Mood**: Premium, modern, calm, high-craft SaaS
- **Inspiration**: Stripe / Linear / Vercel hero backgrounds, GPU mesh gradients

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Static gradient PNG or CSS keyframe faking a real-time shader | The root of cheapness |
| No devicePixelRatio cap | Pixel blowup and dropped frames on retina |
| rAF loop running while offscreen | Burns power and GPU for nothing |
| Ignoring prefers-reduced-motion / omitting a no-WebGL fallback | Accessibility + robustness fail |
| Text directly on the gradient with no glass panel / scrim | Fails contrast |
| Multiple canvases or multiple loud accents | Kills premium restraint |
| Animating DOM position / shadow | Steals the shader's GPU budget |

## Required

### Real WebGL shader (the core technique)
A single full-screen quad plus a fragment shader compiled once, a noise-driven flowing field. Reuse this skeleton directly:

Vertex shader (full-screen quad, passthrough):
```glsl
attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }
```

Fragment shader (fbm domain-warp gradient, uniforms u_res / u_time / u_speed / u_blend / u_grain):
```glsl
precision highp float;
uniform vec2 u_res; uniform float u_time, u_speed, u_blend, u_grain;
vec2 hash2(vec2 p){ p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return fract(sin(p)*43758.5453)*2.0-1.0; }
float noise(vec2 p){ vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);
  return mix(mix(dot(hash2(i),f),dot(hash2(i+vec2(1,0)),f-vec2(1,0)),u.x),
             mix(dot(hash2(i+vec2(0,1)),f-vec2(0,1)),dot(hash2(i+vec2(1,1)),f-vec2(1,1)),u.x),u.y); }
float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.0; a*=0.5; } return v; }
void main(){
  vec2 uv=gl_FragCoord.xy/u_res.xy; vec2 q=uv; q.x*=u_res.x/u_res.y;
  float t=u_time*0.05*u_speed;
  float f1=fbm(q*1.5+vec2(t,-t*0.5));
  float f2=fbm(q*2.0+vec2(f1*u_blend-t*0.3,f1+t*0.2));
  float f=fbm(q*1.2+f2*(0.6+u_blend));
  vec3 base=vec3(0.031,0.035,0.051), violet=vec3(0.486,0.361,1.0), cyan=vec3(0.133,0.827,0.933), magenta=vec3(0.956,0.447,0.714);
  vec3 col=base;
  col=mix(col,violet,smoothstep(0.15,0.75,f+0.35));
  col=mix(col,cyan,smoothstep(0.3,0.9,f2*0.5+0.5)*0.6);
  col=mix(col,magenta,smoothstep(0.4,1.0,f1*0.5+0.5)*0.45);
  float vig=smoothstep(1.2,0.2,length(uv-0.5)); col*=0.55+0.6*vig;
  col+=(fract(sin(dot(uv+t,vec2(12.9898,78.233)))*43758.5453)-0.5)*u_grain*0.12;
  gl_FragColor=vec4(col,1.0);
}
```

### Render loop and performance
- const dpr = Math.min(window.devicePixelRatio || 1, 2)
- resize: canvas.width = clientWidth * dpr; gl.viewport(0, 0, w, h); update u_res
- IntersectionObserver: cancelAnimationFrame when offscreen, restart in view
- Compile the shader once; per frame only update uniforms (u_time = performance.now() / 1000)

### Fallback chain (critical)
- prefers-reduced-motion: draw exactly one frame (fixed t), do not requestAnimationFrame
- gl is null (WebGL unavailable): keep the .sg-fallback CSS static gradient under the canvas and return
- Mobile may downsample (dpr = 1) or show a still

### Visuals and content layer
- Near-black #08090D base; iridescent violet #7C5CFF / cyan #22D3EE / magenta #F472B6
- Content sits on .sg-glass frosted panels: bg-white/[0.05] + backdrop-blur-2xl + border-white/10
- Text over the gradient gets a scrim or glass backing for 4.5:1
- One UI accent, violet #7C5CFF: primary CTA, focus ring focus:ring-[#7C5CFF]/25, links
- Every DOM animation touches transform / opacity only

### Accessibility and CLS
- canvas aria-hidden="true"; explicit container height (h-screen etc.) to prevent CLS
- The content layer is independent of the canvas; the page stays readable if the canvas fails

## Self-Verification Checklist

- [ ] A real WebGL fragment shader (full-screen quad + fbm flow), not a fake animation
- [ ] dpr capped at 2 + resize handling + IntersectionObserver pause offscreen
- [ ] prefers-reduced-motion single frame + no-WebGL CSS fallback
- [ ] Text sits on glass panels / scrim and passes contrast
- [ ] Near-black base + single violet accent + DOM animates only transform/opacity
- [ ] canvas aria-hidden + CLS prevented

---

# Shader Gradient Design System

> A premium SaaS aesthetic built on a real-time WebGL fragment-shader mesh gradient. A slowly breathing iridescent field flows across a near-black canvas while frosted-glass panels float above it, paired with a clean modern sans and a single bright accent - the living-gradient look of Stripe, Linear, and Vercel heroes.

## Design Philosophy

The shader-gradient creed: the background is not an image, it is light that never repeats. A genuine real-time shader brings the hero to life - the gradient flows slowly, colors bleed into one another, like a breathing aurora. That living quality is a premium-SaaS signal: it says "we wrote a shader even for the background", not "we pasted an exported gradient PNG".

Core principles:
- Living background = premium signal: a real fragment shader running on the GPU, a noise-driven flowing field where no two frames are identical. Cheapness comes from a static gradient or a fake CSS keyframe animation; class comes from the continuous evolution of a true shader
- Restraint is discipline: only the canvas moves, the DOM never flies around. Every UI animation touches transform / opacity only, leaving the GPU budget for the shader. One living gradient per page is enough - do not fill the screen with canvases
- Near-black plus iridescence: a deep near-black base #08090D lets the iridescent gradient (violet #7C5CFF / cyan #22D3EE / magenta #F472B6) glow. Hues bleed rather than hard-cut, using fbm domain warping to produce organic flow
- Frosted glass carries content: content sits on backdrop-blur glass panels with a 1px white/10 border and a dark scrim to hold text at 4.5:1 over the gradient field. The gradient is atmosphere; text must always stay crisp
- One accent color: violet #7C5CFF is the single UI accent (primary CTA, focus ring, links); everything else is glass and near-black. Multiple loud colors destroy the premium feel

Design principles:
- Performance line: cap devicePixelRatio at 2; pause the rAF loop when offscreen via IntersectionObserver and resume in view; a single full-screen quad with a shader compiled once, never rebuilt per frame
- Fallback chain: prefers-reduced-motion renders exactly one static frame (no loop); when WebGL is unavailable, fall back to a visually similar static CSS gradient; mobile may downsample or show a still
- Accessibility and CLS: decorative canvas gets aria-hidden; explicit size / fixed container height prevents CLS; the content layer is always independent of the canvas, so the page stays readable if the canvas fails

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/10
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_10px_rgba(0,0,0,0.4)]
md: shadow-[0_20px_60px_rgba(0,0,0,0.45)]
lg: shadow-[0_30px_90px_rgba(0,0,0,0.55)]
hover: hover:shadow-[0_24px_70px_rgba(124,92,255,0.25)]
focus: focus-visible:ring-2 focus-visible:ring-[#7C5CFF]/40
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-white/12
Transition: transition-all duration-300 ease-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-semibold text-white tracking-tight
Body: text-white/70 leading-relaxed
Mono: font-mono text-[#7C5CFF] uppercase tracking-[0.25em]
```

### Type scale
```
Hero: text-5xl md:text-7xl
H1: text-4xl md:text-6xl
H2: text-3xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-base md:text-lg
Small: text-sm
```

### Spacing
```
Section: py-24 md:py-32
Container: px-6 md:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-8
Gap lg: gap-12
```

### Color roles
```
Background primary: bg-[#08090D]
Background secondary: bg-[#12131A]
Background accent: bg-[#7C5CFF]
Text primary: text-white
Text secondary: text-white/70
Text muted: text-white/50
Button primary: bg-[#7C5CFF] text-white
Button secondary: bg-white/8 backdrop-blur-xl text-white border border-white/12
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `animate-pulse`
- `duration-100`

### Banned patterns
- matches `^bg-gradient-to-r$`
- matches `^animate-(pulse|bounce)$`
- matches `^duration-100$`

### Why they are banned
- `bg-gradient-to-r`: Motion and color come from the WebGL shader, not decorative CSS gradients
- `from-indigo-600`: No AI-cliche gradient stops; the field is a real fbm shader over near-black
- `animate-pulse`: Do not fake life with CSS keyframes; the living quality is the real shader
- `duration-100`: The living gradient is calm and slow; snappy transitions break the premium feel

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-xl
transition-all duration-300
active:scale-[0.98]
```

### Every card must include
```
bg-white/[0.06] backdrop-blur-2xl
border border-white/10
rounded-2xl
```

### Every input must include
```
bg-white/[0.06] backdrop-blur-xl
border border-white/12
rounded-xl
text-white placeholder-white/40
focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25
transition-all duration-300
```

---

## [COMPARE] Shader Gradient wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-xl transition-all duration-300 active:scale-[0.98] bg-[#7C5CFF] text-white">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white/[0.06] backdrop-blur-2xl border border-white/10 rounded-2xl p-6">
 <h3 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white/[0.06] backdrop-blur-xl border border-white/12 rounded-xl text-white placeholder-white/40 focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Shader Gradient page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#08090D] text-white border border-white/10 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
 <a href="/" class="font-semibold text-white tracking-tight text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-8 text-white/70 leading-relaxed text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#7C5CFF] text-white py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-white tracking-tight text-5xl md:text-7xl">
 {HEADLINE}
 </h1>
 <p class="text-white/70 leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-xl transition-all duration-300 active:scale-[0.98] bg-[#7C5CFF] text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#08090D] text-white py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-white tracking-tight text-3xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Card template - repeat for each card -->
 <div class="bg-white/[0.06] backdrop-blur-2xl border border-white/10 rounded-2xl p-6">
 <h3 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="text-white/70 leading-relaxed text-base md:text-lg text-white/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-white/[0.06] backdrop-blur-xl border border-white/12 rounded-xl text-white placeholder-white/40 focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#12131A] text-white/70 py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
 <div>
 <span class="font-semibold text-white tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="text-white/70 leading-relaxed text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="text-white/70 leading-relaxed text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Shader Gradient post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-xl transition-all duration-300 active:scale-[0.98]`
- [ ] Card includes: `bg-white/[0.06] backdrop-blur-2xl border border-white/10 rounded-2xl`
- [ ] Input includes: `bg-white/[0.06] backdrop-blur-xl border border-white/12 rounded-xl text-white placeholder-white/40 focus:outline-none focus:border-[#7C5CFF]/70 focus:ring-2 focus:ring-[#7C5CFF]/25 transition-all duration-300`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `from-indigo-600`
- [ ] Not using `via-purple-600`
- [ ] Not using `to-pink-500`
- [ ] Not using `animate-pulse`
- [ ] Not using `duration-100`

### Style rule check
- [ ] Drive the flowing gradient with a real WebGL fragment shader: full-screen quad + time / resolution uniforms + fbm domain warp
- [ ] Cap devicePixelRatio at 2 and re-size the canvas and viewport on resize
- [ ] Pause requestAnimationFrame offscreen and resume in view via IntersectionObserver to save power and GPU
- [ ] Under prefers-reduced-motion render exactly one static frame, never start the animation loop
- [ ] When WebGL is unavailable, fall back to a visually similar static CSS gradient background

### Style drift check
- [ ] Does not violate: Never fake a real-time shader with a static gradient PNG or a CSS keyframe animation (the root of cheapness)
- [ ] Does not violate: Never skip a devicePixelRatio cap (pixel blowup and dropped frames on retina)
- [ ] Does not violate: Never keep the rAF loop running while offscreen (burns power and GPU for nothing)
- [ ] Does not violate: Never ignore prefers-reduced-motion or omit the WebGL-unavailable fallback
- [ ] Does not violate: Never place text directly on the gradient field with no glass panel / scrim (fails contrast)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Shader Gradient

---

## [EXAMPLES] Example prompts

### 1. SaaS 

 SaaS 

```
Create a premium SaaS landing hero with a real WebGL shader-gradient background:
1. A full-screen <canvas> WebGL fragment shader: a single quad, fbm domain-warped flowing field, uniforms u_res / u_time; near-black #08090D base with iridescent violet #7C5CFF, cyan #22D3EE and magenta #F472B6
2. Cap devicePixelRatio at 2, handle resize, and pause the rAF loop offscreen with an IntersectionObserver
3. prefers-reduced-motion renders one static frame; if WebGL is unavailable, fall back to a visually similar CSS radial-gradient background
4. Frosted-glass content panel (bg-white/[0.05], backdrop-blur-2xl, 1px white/10 border) holding the headline, subtext, and a single violet CTA plus a frosted secondary button
5. A frosted floating nav and a feature row of glass cards below the fold on quiet near-black sections
6. Only the canvas animates; all DOM motion is transform / opacity only; canvas aria-hidden and explicit heights to avoid CLS
```

### 2. + 

 uniform 

```
Create a developer-product hero on a living shader gradient, plus an interactive shader lab:
1. WebGL fragment-shader background (fbm flowing field, near-black #08090D + violet/cyan/magenta), dpr capped at 2, IntersectionObserver pause, reduced-motion single frame, CSS-gradient fallback when WebGL is missing
2. Glass hero panel with a monospace kicker, a bold sans headline, and one violet #7C5CFF CTA
3. A "shader lab" card with three sliders - speed, color blend, grain - each wired via useState/refs to the u_speed / u_blend / u_grain uniforms so the gradient responds live
4. A frosted stat strip and a pricing row of glass cards on near-black sections below
5. One accent only; DOM animation limited to transform / opacity; canvas aria-hidden with explicit sizes to prevent CLS
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- fake a real-time shader with a static gradient PNG or a CSS keyframe animation (the root of cheapness)
- skip a devicePixelRatio cap (pixel blowup and dropped frames on retina)
- keep the rAF loop running while offscreen (burns power and GPU for nothing)
- ignore prefers-reduced-motion or omit the WebGL-unavailable fallback
- place text directly on the gradient field with no glass panel / scrim (fails contrast)
- fill the screen with multiple canvases or multiple loud accents (kills the premium restraint)
- animate DOM element position / shadow and steal the shader's GPU budget

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never fake a real-time shader with a static gradient PNG or a CSS keyframe animation (the root of cheapness)
- [ ] never skip a devicePixelRatio cap (pixel blowup and dropped frames on retina)
- [ ] never keep the rAF loop running while offscreen (burns power and GPU for nothing)
- [ ] never ignore prefers-reduced-motion or omit the WebGL-unavailable fallback
- [ ] never place text directly on the gradient field with no glass panel / scrim (fails contrast)