PageSourceSearch

https://zojo.ai/grainy

html zojo.ai collected 2026-10-05 15:08:43 UTC 50,556 bytes, 7 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/a7d1cce8496465df-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/de70bee13400563f.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/6128e8377e69ee53.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/b2da70dc8b0ede72.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4dd4c1c62a9a5793.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-8eb103c286233b13.js"/>
1<script src="/_next/static/chunks/0c8af877-c93d9d48dc92cc2c.js" async=""></script>
1<script src="/_next/static/chunks/9475-e13672eaa5652bac.js" async=""></script>
1<script src="/_next/static/chunks/main-app-2f2e78540eace9a7.js" async=""></script>
1<script src="/_next/static/chunks/5989-52258810f753f3f6.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-98a1b70d60ebd219.js" async=""></script>
1<script src="/_next/static/chunks/5573-a9e23824adfe1f84.js" async=""></script>
1<script src="/_next/static/chunks/1485-8c4d96fd573afee0.js" async=""></script>
1<script src="/_next/static/chunks/6021-e23b78e8fa27c682.js" async=""></script>
1<script src="/_next/static/chunks/9238-07bff239a20f6826.js" async=""></script>
1<script src="/_next/static/chunks/5704-d46574befb693970.js" async=""></script>
1<script src="/_next/static/chunks/626-bb9119043ad25ed2.js" async=""></script>
1<script src="/_next/static/chunks/app/grainy/page-099130784ab67e8a.js" async=""></script>
1<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4841767041375839" crossorigin="anonymous"></script>
vendor: 66 bytes, line 1
1<script async="" src="https://www.googletagmanager.com/gtag/js?id=
1G-4QYNK9BKZP
vendor: 11 bytes, line 1
1"></script>
1<meta name="next-size-adjust" content=""/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><title>Grainy Gradient Generator | zojo</title><meta name="description" content="Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes."/><meta name="keywords" content="grainy gradient,noise gradient,gradient generator,cover image generator,shimmer noise,zojo"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><meta name="google-adsense-account" content="ca-pub-4841767041375839"/><link rel="canonical" href="/grainy"/><meta property="og:title" content="Grainy Gradient Generator | zojo"/><meta property="og:description" content="Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes."/><meta property="og:url" content="/grainy"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Grainy Gradient Generator | zojo"/><meta name="twitter:description" content="Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes."/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="512x512"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="__variable_188709 __variable_9a8899 __variable_74e34a antialiased"><div hidden=""><!--$--><!--/$--></div><div class="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-blue-50 dark:from-slate-950 dark:via-purple-950/30 dark:to-blue-950/30"><nav class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-lg border-b border-slate-200/50 dark:border-slate-800/50"><div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"><a class="flex items-center gap-2" href="/"><div><img alt="Logo" loading="lazy" width="150" height="50" decoding="async" data-nimg="1" style="color:transparent" src="/zojo-logo.svg"/></div></a><div class="flex items-center gap-4"><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Color Cover</button><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Watercolor</button><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Paper</button><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Gradient Text</button><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Infographic</button><button data-slot="button" data-variant="ghost" data-size="default" class="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 hidden md:inline-flex">Markdown</button></div></div></nav><div class="pt-24 pb-12 px-6"><div class="max-w-7xl mx-auto"><div class="text-center mb-12"><span data-slot="badge" class="inline-flex items-center justify-center rounded-full border w-fit whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&amp;]:hover:bg-primary/90 bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 border-purple-200/50 dark:border-purple-800/50 px-4 py-1.5 text-sm font-medium mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-4 h-4 mr-2 inline" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>Grainy Gradient Generator</span><h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4"><span class="bg-gradient-to-r from-purple-600 via-blue-500 to-cyan-400 bg-clip-text text-transparent">Grainy Gradients</span></h1><p class="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">Create stunning grainy gradient backgrounds for modern web design</p></div><div class="grid grid-cols-1 lg:grid-cols-3 gap-8"><div class="lg:col-span-2 space-y-6"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50 overflow-hidden"><div data-slot="card-content" class="p-6"><div class="mb-4 flex items-center justify-between"><h2 class="text-2xl font-bold text-slate-900 dark:text-white">Preview</h2><div class="flex gap-2"><button data-slot="button" data-variant="outline" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md px-3 has-[&gt;svg]:px-2.5 gap-2 hover:text-purple-600 hover:border-purple-600"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw w-4 h-4" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>Randomize</button><button data-slot="button" data-variant="default" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-primary/90 h-8 rounded-md px-3 has-[&gt;svg]:px-2.5 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-4 h-4" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg>Download</button></div></div>
1<div class="relative bg-slate-100 dark:bg-slate-900 rounded-lg overflow-hidden shadow-2xl"><div style="width:100%;aspect-ratio:900/383;position:relative"><div class="_container_b3f07_1 undefined" style="position:relative;background:linear-gradient(135deg, #de6262, #ffb88c)"><canvas width="1" height="1" class="_canvas_16t71_1  " style="border-radius:inherit;visibility:unset"></canvas><div class="_children_b3f07_6"><div style="width:100%;aspect-ratio:900/383;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative"></div></div></div></div></div><div class="mt-4 text-sm text-slate-500 dark:text-slate-400 text-center">Dimensions: <!-- -->900<!-- --> × <!-- -->383<!-- --> px</div></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50"><div data-slot="card-content" class="p-6"><div class="flex items-center justify-between mb-4"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type w-5 h-5 text-purple-600" aria-hidden="true"><path d="M12 4v16"></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path><path d="M9 20h6"></path></svg><h3 class="text-xl font-bold text-slate-900 dark:text-white">Text Overlay</h3></div><div class="flex items-center gap-2"><label data-slot="label" class="flex items-center gap-2 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-sm text-slate-600 dark:text-slate-400">OFF</label><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" data-slot="switch" class="peer data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-purple-600"><span data-state="unchecked" data-slot="switch-thumb" class="bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50"><div data-slot="card-content" class="p-6"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings w-5 h-5 text-purple-600" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg><h3 class="text-xl font-bold text-slate-900 dark:text-white">Dimensions</h3></div><div class="space-y-4"><div class="grid grid-cols-2 gap-2"><button data-slot="button" data-variant="outline" data-size="default" class="justify-center gap-2 whitespace-nowrap rounded-md disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border shadow-xs hover:text-accent-foreground dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 p-3 h-auto flex flex-col items-start transition-all duration-300 text-sm font-medium border-purple-600 bg-purple-100 dar
1k:bg-purple-900/30 text-purple-700 dark:text-purple-400 hover:bg-purple-100"><div>WeChat Official (2.35:1)</div><div class="text-xs opacity-70 mt-1">900<!-- -->×<!-- -->383</div></button><button data-slot="button" data-variant="outline" data-size="default" class="justify-center gap-2 whitespace-nowrap rounded-md disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 p-3 h-auto flex flex-col items-start transition-all duration-300 text-sm font-medium hover:border-purple-600/50"><div>Square (1:1)</div><div class="text-xs opacity-70 mt-1">800<!-- -->×<!-- -->800</div></button><button data-slot="button" data-variant="outline" data-size="default" class="justify-center gap-2 whitespace-nowrap rounded-md disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 p-3 h-auto flex flex-col items-start transition-all duration-300 text-sm font-medium hover:border-purple-600/50"><div>Landscape (16:9)</div><div class="text-xs opacity-70 mt-1">1920<!-- -->×<!-- -->1080</div></button><button data-slot="button" data-variant="outline" data-size="default" class="justify-center gap-2 whitespace-nowrap rounded-md disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 p-3 h-auto flex flex-col items-start transition-all duration-300 text-sm font-medium hover:border-purple-600/50"><div>Portrait (9:16)</div><div class="text-xs opacity-70 mt-1">1080<!-- -->×<!-- -->1920</div></button><button data-slot="button" data-variant="outline" data-size="default" class="justify-center gap-2 whitespace-nowrap rounded-md disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 p-3 h-auto flex flex-col items-start transition-all duration-300 text-sm font-medium hover:border-purple-600/50"><div>Custom</div><div class="text-xs opacity-70 mt-1">900<!-- -->×<!-- -->383</div></button></div></div></div></div></div><div class="space-y-6"><div data-state="open" data-slot="collapsible"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50"><div data-slot="card-content" class="p-6"><button type="button" aria-controls="radix-_R_1l5fiudb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="w-full"><div class="flex items-center justify-between mb-4"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette w-5 h-5 text-purple-600" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><h3 class="text-xl font-bold text-slate-900 dark:text-white">Gradient</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 text-slate-600 dar
1k:text-slate-400 transition-transform transform rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div></button><div data-state="open" id="radix-_R_1l5fiudb_" data-slot="collapsible-content"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground h-9 items-center justify-center rounded-lg p-[3px] grid w-full grid-cols-3 mb-4" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_ll5fiudb_-content-preset" data-state="active" id="radix-_R_ll5fiudb_-trigger-preset" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Preset</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_ll5fiudb_-content-random" data-state="inactive" id="radix-_R_ll5fiudb_-trigger-random" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Random</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_ll5fiudb_-content-custom" data-state="inactive" id="radix-_R_ll5fiudb_-trigger-custom" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Custom</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_ll5fiudb_-trigger-preset" id="radix-_R_ll5fiudb_-content-preset" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none space-y-2 mt-0" style="animation-duration:0s"><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 border-purple-600 bg-purple-100 dar
1k:bg-purple-900/30"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #de6262, #ffb88c)"></div><span class="font-semibold text-sm">Sunset</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #667eea, #764ba2)"></div><span class="font-semibold text-sm">Ocean</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #0f9b0f, #000000)"></div><span class="font-semibold text-sm">Forest</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #c471f5, #fa71cd)"></div><span class="font-semibold text-sm">Purple Dream</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #f12711, #f5af19)"></div><span class="font-semibold text-sm">Fire</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #e0c3fc, #8ec5fc)"></div><span class="font-semibold text-sm">Ice</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #ffecd2, #fcb69f)"></div><span class="font-semibold text-sm">Candy</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #ff0080, #ff8c00, #40e0d0)"></div><span class="font-semibold text-sm">Neon</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #5E5BFF, #7B5FFF)"></div><span class="font-semibold text-sm">Blue Violet</span></div></button><button data-slot="button" data-variant="outline" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 has-[&gt;svg]:px-3 w-full p-3 h-auto transition-all duration-300 hover:border-purple-600/50"><div class="w-full flex items-center gap-3"><div class="w-12 h-12 rounded" style="background:linear-gradient(135deg, #FF6B8B, #FFB3C7)"></div><span class="font-semibold text-sm">Rose Glow</span></div></button></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_ll5fiudb_-trigger-random" hidden="" id="radix-_R_ll5fiudb_-content-random" tabindex="0" data-slot="tabs-content" 
1class="flex-1 outline-none space-y-3 mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_ll5fiudb_-trigger-custom" hidden="" id="radix-_R_ll5fiudb_-content-custom" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none space-y-4 mt-0"></div></div></div></div></div></div><div data-state="open" data-slot="collapsible"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50"><div data-slot="card-content" class="p-6"><button type="button" aria-controls="radix-_R_2l5fiudb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="w-full"><div class="flex items-center justify-between mb-4"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-5 h-5 text-purple-600" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><h3 class="text-xl font-bold text-slate-900 dark:text-white">Grain Effect</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 text-slate-600 dark:text-slate-400 transition-transform transform rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div></button><div data-state="open" id="radix-_R_2l5fiudb_" data-slot="collapsible-content" class="space-y-4"><div class="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-4 h-4 text-purple-600" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-sm font-semibold text-slate-700 dark:text-slate-300">Shimmer Animation</label></div><button type="button" role="switch" aria-checked="false" data-state="unchecked" value="on" data-slot="switch" class="peer data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-purple-600"><span data-state="unchecked" data-slot="switch-thumb" class="bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"></span></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0" tabindex="-1" value="on"/></div></div></div></div></div><div data-state="closed" data-slot="collapsible"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm border-2 border-slate-200/50 dark:border-slate-800/50">
1<div data-slot="card-content" class="p-6"><button type="button" aria-controls="radix-_R_3l5fiudb_" aria-expanded="false" data-state="closed" data-slot="collapsible-trigger" class="w-full"><div class="flex items-center justify-between mb-4"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw w-5 h-5 text-purple-600" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg><h3 class="text-xl font-bold text-slate-900 dark:text-white">Gradient Animation</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 text-slate-600 dark:text-slate-400 transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div></button><div data-state="closed" id="radix-_R_3l5fiudb_" hidden="" data-slot="collapsible-content" class="space-y-4"></div></div></div></div></div></div></div></div></div><!--$--><!--/$--><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
1<script>
2 
vendor: 134 bytes, lines 2-6
2window.dataLayer = window.dataLayer || [];
3  function gtag(){dataLayer.push(arguments);}
4  gtag('js', new Date());
5
6  gtag('config', '
6G-4QYNK9BKZP
vendor: 8 bytes, lines 6-7
6');
7    
7</script>
7<script src="/_next/static/chunks/webpack-8eb103c286233b13.js" id="_R_" async=""></script>
7<script>(self.__next_f=self.__next_f||[]).push([0])</script>
7<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[556,[],\"\"]\n3:I[9114,[],\"\"]\n4:I[7493,[\"5989\",\"static/chunks/5989-52258810f753f3f6.js\",\"7177\",\"static/chunks/app/layout-98a1b70d60ebd219.js\"],\"Toaster\"]\n5:I[6537,[],\"ClientPageRoot\"]\n6:I[6054,[\"5573\",\"static/chunks/5573-a9e23824adfe1f84.js\",\"1485\",\"static/chunks/1485-8c4d96fd573afee0.js\",\"6021\",\"static/chunks/6021-e23b78e8fa27c682.js\",\"9238\",\"static/chunks/9238-07bff239a20f6826.js\",\"5704\",\"static/chunks/5704-d46574befb693970.js\",\"626\",\"static/chunks/626-bb9119043ad25ed2.js\",\"3101\",\"static/chunks/app/grainy/page-099130784ab67e8a.js\"],\"default\"]\n9:I[2153,[],\"OutletBoundary\"]\nb:I[1143,[],\"AsyncMetadataOutlet\"]\nd:I[2153,[],\"ViewportBoundary\"]\nf:I[2153,[],\"MetadataBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[56,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a7d1cce8496465df-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/de70bee13400563f.css\",\"style\"]\n:HL[\"/_next/static/css/6128e8377e69ee53.css\",\"style\"]\n:HL[\"/_next/static/css/b2da70dc8b0ede72.css\",\"style\"]\n:HL[\"/_next/static/css/4dd4c1c62a9a5793.css\",\"style\"]\n"])</script>
7<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"ljAEHp0a2ASYzMlSuGycf\",\"p\":\"\",\"c\":[\"\",\"grainy\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"grainy\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/de70bee13400563f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6128e8377e69ee53.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b2da70dc8b0ede72.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4841767041375839\",\"crossOrigin\":\"anonymous\"}]]}],[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 __variable_74e34a antialiased\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L4\",null,{}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-4QYNK9BKZP\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n window.dataLayer = window.dataLayer || [];\\n  function gtag(){dataLayer.push(arguments);}\\n  gtag('js', new Date());\\n\\n  gtag('config', 'G-4QYNK9BKZP');\\n    \"}}]]}]]}]]}],{\"children\":[\"grainy\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L5\",null,{\"Component\":\"$6\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@7\",\"$@8\"]}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4dd4c1c62a9a5793.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$La\",[\"$\",\"$Lb\",null,{\"promise\":\"$@c\"}]]}]]}],{}
7,null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$10\",null,{\"fallback\":null,\"children\":\"$L11\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",[]],\"s\":false,\"S\":true}\n7:{}\n8:\"$0:f:0:1:2:children:2:children:1:props:children:0:props:params"])</script>
7<script>self.__next_f.push([1,"\"\n"])</script>
7<script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:null\n"])</script>
7<script>self.__next_f.push([1,"13:I[8940,[],\"IconMark\"]\n"])</script>
7<script>self.__next_f.push([1,"c:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Grainy Gradient Generator | zojo\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"grainy gradient,noise gradient,gradient generator,cover image generator,shimmer noise,zojo\"}],[\"$\",\"meta\",\"3\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"5\",{\"name\":\"google-adsense-account\",\"content\":\"ca-pub-4841767041375839\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"/grainy\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Grainy Gradient Generator | zojo\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"/grainy\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:title\",\"content\":\"Grainy Gradient Generator | zojo\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:description\",\"content\":\"Generate grainy gradients (noise + shimmer) for cover images. Pick presets, random palettes, or customize colors and export in multiple sizes.\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"512x512\"}],[\"$\",\"$L13\",\"15\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n11:\"$c:metadata\"\n"])</script>
7</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.