Gradient Mesh Background
effect-gradient-meshSoft animated gradient blobs that slowly drift across the page
Show prompt
Add animated gradient mesh blobs to the page background. Create 2-3 absolutely positioned divs inside a fixed wrapper: position fixed, inset 0, pointer-events none, z-index -1. Each blob: position absolute, border-radius 50%, filter blur(80px). Blob 1: w-[500px] h-[500px] bg-accent at 8% opacity, top-0 right-0. Blob 2: w-[400px] h-[400px] bg-accent at 5% opacity, bottom-1/4 left-0. Blob 3: w-[300px] h-[300px] bg-accent at 6% opacity, top-1/2 right-1/4. Animate with @keyframes meshFloat { 0%,100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } with different durations (20s, 25s, 30s), ease-in-out, infinite. Add will-change: transform for performance. The blobs adapt to whatever accent color the Architect picks.Dot Grid Pattern
effect-dot-gridSubtle repeating dot grid pattern on the page background
Show prompt
Add a subtle dot grid to the page background. On the <body>, set background-image: radial-gradient(circle, the border color at 10% opacity 1px, transparent 1px); background-size: 24px 24px. This creates barely visible dots across the page. To add depth, layer a ::before pseudo-element on body: position fixed, inset 0, pointer-events none, z-index 0, background: linear-gradient(to bottom, bg at 0%, transparent at 30%, transparent at 70%, bg at 100%). This fades the dots at the top and bottom edges. Ensure all page content has position relative z-index 1 or higher. The dots add a technical, precise texture without distracting from content. Works on both light and dark themes.
Film Grain Texture
effect-grain-textureSubtle CSS noise overlay for analog warmth and depth
Show prompt
Add a subtle film grain overlay to the page. Create a ::after pseudo-element on <body>: position fixed, inset 0, z-index 9999, pointer-events none, opacity 0.03 (barely perceptible). Use an SVG noise filter as background: background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px. The grain should be barely visible — it adds analog warmth to flat digital designs. If someone notices it consciously, it's too strong. Works especially well on dark themes.Aurora Glow
effect-aurora-glowSlow-moving aurora borealis color bands behind the hero
Show prompt
Add an aurora effect behind the hero section. On the hero container, add a ::before pseudo-element: position absolute, inset 0, z-index 0, overflow hidden. Background: linear-gradient(135deg, transparent 20%, accent at 5% opacity 30%, transparent 40%, accent at 8% opacity 55%, transparent 70%, accent at 3% opacity 85%, transparent). Background-size: 200% 200%. Animate: @keyframes aurora { 0% { background-position: 0% 50%; opacity: 0.5; } 25% { background-position: 50% 0%; opacity: 0.7; } 50% { background-position: 100% 50%; opacity: 0.5; } 75% { background-position: 50% 100%; opacity: 0.8; } 100% { background-position: 0% 50%; opacity: 0.5; } } duration 12s ease-in-out infinite. Add filter: blur(40px) to soften bands. Ensure hero content has position relative z-10. The aurora should be dreamy and atmospheric, not an in-your-face gradient.Floating Geometric Shapes
effect-geometric-shapesAbstract shapes floating in the background with slow animation
Show prompt
Add decorative floating geometric shapes. Create a fixed wrapper: position fixed, inset 0, z-index -1, pointer-events none, overflow hidden. Place 4-5 shapes: (1) circle w-20 h-20 rounded-full border border-accent/10 at top-[15%] right-[10%]. (2) square w-16 h-16 border border-accent/8 rotate-45 at top-[40%] left-[5%]. (3) larger circle w-32 h-32 rounded-full bg-accent/3 at bottom-[20%] right-[15%]. (4) small dot w-3 h-3 rounded-full bg-accent/20 at top-[60%] left-[20%]. (5) rectangle w-24 h-12 border border-accent/6 rotate-12 at bottom-[40%] left-[60%]. Each animates with @keyframes shapeFloat { 0%,100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-20px) rotate(calc(var(--r) + 5deg)); } } at different durations (15s-30s). Set custom --r rotation per shape via inline style. On mobile, show only 2-3 shapes. Shapes are barely visible — depth and interest without distraction.Spotlight Follow
effect-spotlight-followA soft radial gradient that follows the mouse cursor
Show prompt
Add a cursor-following spotlight. Create a div: position fixed, inset 0, z-index -1, pointer-events none. Inside, a spotlight element: position absolute, w-[600px] h-[600px], background: radial-gradient(circle, accent at 6% opacity at center, transparent at 70%), border-radius 50%, transform translate(-50%, -50%), transition: left 0.3s ease-out, top 0.3s ease-out (slight lag for smooth trailing). JavaScript: document.addEventListener('mousemove', (e) => { spotlight.style.left = e.clientX + 'px'; spotlight.style.top = e.clientY + 'px'; }). On mobile/touch, position spotlight statically at center of hero section or at 50% 30% of viewport. Add will-change: left, top for performance. The effect should feel like ambient light following attention — subtle and elegant.Scroll Progress Bar
effect-scroll-progressA thin progress bar at the top showing scroll position
Show prompt
Add a scroll progress indicator. Create a div: position fixed, top 0, left 0, h-[2px] bg-accent z-[9999], width 0%, will-change width. No transition on width — it should update instantly for responsive feel. JavaScript: window.addEventListener('scroll', () => { const scrolled = window.scrollY; const total = document.documentElement.scrollHeight - window.innerHeight; const pct = (scrolled / total) * 100; progressBar.style.width = pct + '%'; }, { passive: true }). This replaces or layers on top of the static 3px accent bar. If the design has an accent bar, make the progress bar 2px and sit directly on top (same position, higher z-index). Gives users a sense of position on the page — especially useful for long portfolios.Decorative Section Dividers
effect-section-dividersStylish visual dividers between each major section
Show prompt
Add decorative dividers between each major section. Insert a visual divider element between section tags (as a sibling, not inside sections). Choose ONE style and apply consistently: OPTION A — centered accent line: div w-12 h-[1.5px] bg-accent/30 mx-auto. OPTION B — triple dots: div flex justify-center gap-2, three spans each w-1.5 h-1.5 rounded-full bg-accent/30. OPTION C — fade gradient: div h-px w-full max-w-xs mx-auto, background linear-gradient(90deg, transparent, accent at 20% opacity, transparent). Place dividers in the padding gap between sections. These small details elevate the design from clean to polished. Apply the same divider between every section pair for consistency.
Gradient Text Highlights
effect-text-gradientGradient color applied to key headings throughout the site
Show prompt
Apply gradient text to key headings. For the hero name (primary): background: linear-gradient(135deg, text color, accent color) or use spec's text_gradient. Apply: -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text. For the contact section heading: use the same gradient to create bookend symmetry with the hero. Do NOT apply gradient text to body copy, labels, navigation, or any small text — reserve for 2-3 key moments only. If the accent is warm (gold, coral), the gradient feels luxurious. If cool (sage, lavender), it feels ethereal. The effect adapts to whatever palette the Architect chose. Add a fallback: for browsers that don't support background-clip text, ensure the heading still displays in the text color.
Hover Glow Effects
effect-hover-glowCards and interactive elements glow with accent color on hover
Show prompt
Add hover glow to all interactive card elements. Create a CSS utility: .hover-glow { transition: box-shadow 0.4s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out; } .hover-glow:hover { box-shadow: 0 0 30px -8px rgba(accent, 0.12); border-color: rgba(accent, 0.25); transform: translateY(-1px); }. Apply this class to all cards across experience, projects, skills, education, and contact sections. For CTA buttons/links in hero and contact, use a stronger glow on hover: box-shadow 0 0 40px -8px rgba(accent, 0.2). The glow should feel like elements are slightly luminous — not neon or harsh. The translateY(-1px) creates a subtle "lifting toward light" effect that pairs well with the glow.Gradient Mesh Shader
shader-gradient-meshAnimated WebGL gradient mesh with organic flowing blobs behind the hero
Show prompt
A real WebGL shader renders an animated gradient mesh background behind the hero. Organic color blobs slowly morph and drift using simplex noise, colored with the accent palette at low opacity. The effect is subtle and atmospheric — it adds depth without competing with the text.
Aurora Shader
shader-auroraAnimated WebGL aurora borealis color bands behind the hero
Show prompt
A real WebGL shader renders flowing aurora borealis bands behind the hero. Horizontal color waves drift slowly using sine functions, with the accent color at low opacity. The effect is dreamy and atmospheric, concentrated in the middle of the viewport.
Noise Waves Shader
shader-noise-wavesAnimated WebGL layered noise waves behind the hero
Show prompt
A real WebGL shader renders layered noise waves. Multiple octaves of value noise create a gentle undulating field, with accent colors at low opacity.
Plasma Shader
shader-plasmaClassic animated plasma interference patterns
Show prompt
A real WebGL shader renders classic plasma interference patterns. Overlapping sine waves create organic, shifting color fields using the accent palette.
Fluid Distortion Shader
shader-fluidOrganic flowing fluid-like radial motion
Show prompt
A real WebGL shader renders organic fluid-like distortion. Radial and angular sine functions create flowing, liquid motion with accent colors.
Ripple Shader
shader-rippleConcentric ripples emanating from center
Show prompt
A real WebGL shader renders concentric ripples from the center of the viewport. Layered sine waves with distance-based fade create a calm water-drop effect using accent colors.
Iridescent Oil Shader
shader-iridescent-oilOil-on-water rainbow film shimmer with thin-film interference
Show prompt
A real WebGL shader renders an oil-on-water iridescent film. Use thin-film interference math (angle + thickness noise) to produce shifting rainbow bands — pinks, teals, violets — that drift slowly. Blend the accent palette over the iridescence so it stays on-brand rather than a pure rainbow. Low-opacity, high polish.
Liquid Chrome Shader
shader-liquid-chromeFlowing metallic reflection with soft specular highlights
Show prompt
A real WebGL shader renders liquid-chrome metal flow. Use domain-warped noise to generate slow flowing peaks, then map to a 1D grayscale gradient with bright specular bands to fake polished metal reflections. Tint with the accent color at low opacity. Reads as futuristic and expensive.
Vaporwave Grid Shader
shader-vaporwave-gridSynthwave perspective grid receding to a horizon sun
Show prompt
A real WebGL shader renders a vaporwave synthwave scene. Bottom half: perspective grid receding to a horizon line, grid lines in accent color with slight glow. Top half: large gradient sun (accent → accent-light) with horizontal scan-line bands cutting through it. Subtle scroll of the grid toward the viewer. Use sparingly — it's a strong aesthetic statement.
Cosmic Dust Shader
shader-cosmic-dustDrifting nebula particles with parallax starfield
Show prompt
A real WebGL shader renders cosmic nebula dust. Layered fbm noise creates soft cloud shapes tinted with the accent palette at low opacity. Add a secondary pass of tiny bright pixels (stars) drifting at a different rate for parallax. The overall feel is weightless and deep-space atmospheric.
Caustics Shader
shader-causticsUnderwater light caustics rippling across the surface
Show prompt
A real WebGL shader renders underwater caustic light patterns — the bright mesh-like ripples you see at the bottom of a pool. Use Voronoi or warped noise with sharp highlights, slow drift. Tint the bright lines with accent color, keep the dark areas transparent. Calm, organic, premium.
Holographic Foil Shader
shader-holographic-foilIridescent foil shimmer that shifts with scroll or mouse position
Show prompt
A real WebGL shader renders a holographic foil effect. Diagonal iridescent bands (pink, cyan, gold) shift based on mouse position or scroll progress, simulating how real foil catches light at different angles. Blend with accent palette. Add subtle noise for a tactile paper-stock texture. Luxurious and playful.
Molten Flow Shader
shader-molten-flowSlow lava-like flowing heat with glowing cracks
Show prompt
A real WebGL shader renders slow molten flow. Domain-warped noise generates viscous-looking surface motion, with bright thin cracks (using high-threshold noise) glowing in the accent color over a darker base. Evokes forging, heat, and energy without being literal fire. Works best with warm palettes.
Godrays Shader
shader-godraysVolumetric light beams angling across the viewport
Show prompt
A real WebGL shader renders volumetric godrays — diagonal light beams spreading from an off-screen source in the upper corner. Use radial noise + angle masking for soft beams, additive blending, accent-light color tint. Slow subtle drift. Evokes cathedral light or morning sun through fog. Cinematic.
Silk Waves Shader
shader-silk-wavesFlowing silk-like fabric ribbons with soft shading
Show prompt
A real WebGL shader renders silk fabric waves. Multiple overlapping sine + noise bands create flowing ribbon shapes with soft highlights and shadows (fake fabric shading). Tint with the accent gradient. The motion is slow, elegant, fashion-editorial. Feels tactile and luxurious.