refactor: simplify export to PNG-only, improve controls UI

- Replace html2canvas with modern-screenshot for better performance - Remove ExportModal and CSS export functionality - Simplify export to single PNG download - Improve controls layout with better spacing and text shadows - Increase glass-panel opacity for better readability - Remove unused ExportData interface and CSS generation utilities
feat: add interactive gradient controls with glassmorphic UI
2025-12-06 05:15:16 -06:00 · 2025-11-06 23:40:43 -06:00 · 2025-11-06 22:55:06 -06:00 · 2025-11-06 21:56:53 -06:00 · 2025-08-09 13:40:04 -05:00 · 2025-08-09 13:21:58 -05:00
31 changed files with 6682 additions and 1734 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*

+stats.html
+*.js
 node_modules
 dist
 dist-ssr
--- a/README.md
+++ b/README.md
@@ -1,29 +1,32 @@
-![Grain Project - Banner Image][grain-banner]
+[![Grain Project - Banner Image][grain-banner]][grain-website]

-A small experiment on creating beautiful, dynamic backgrounds with
-colorful gradients & film grain. Built in <b>React</b> & <b>Vite</b> with <b>SVGs</b> and layers of <b>Radial Gradients</b>
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE)
+[![Node Version](https://img.shields.io/badge/node-v22-brightgreen.svg)](https://nodejs.org/)
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg)](https://pnpm.io/)

-### Dependencies Used
+Create beautiful, dynamic backgrounds with colorful gradients and film grain. Built with modern web technologies for smooth performance and stunning visuals.

- Hero Icons
- React
- Typescript
- Vite
- Sass
+- **Customizable gradients & noise** via SVG filters
+- **Preset palettes** for quick styling
+- **PNG export** with a single click

-### Installation
+Built with [Preact](https://preactjs.com/), [Vite](https://vite.dev/), [Tailwind CSS](https://tailwindcss.com/), [Radix UI](https://www.radix-ui.com/), and [Lucide Icons](https://lucide.dev/).

- Built on Node v16, packages managed with Yarn.
+## Usage

 ```bash
-npm install --global yarn  # If you don't have yarn installed
-yarn  # Run inside root directory to install all dependencies.
+git clone https://github.com/Xevion/grain.git # Clone the repository
+cd grain # Navigate to the repository
+npm install --global pnpm # Install pnpm if needed
+pnpm install # Install dependencies
+pnpm dev # Start development server
+pnpm build # Build for production
+pnpm preview # Preview the production build
 ```

-### Development
+## License

-```bash
-yarn dev  # Starts a development server with Hot Module Replacement
-```
+Licensed under the [GNU General Public License v3.0](LICENSE).

-[grain-banner]: ./.media/banner.jpeg
+[grain-banner]: ./.media/banner.jpeg
+[grain-website]: https://grain.xevion.dev/
--- a/index.html
+++ b/index.html
@@ -3,13 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grain | Dynamic Gradients & Noise</title>
+    <title>Grain | Neural Gradient Explorer</title>
    <meta property="og:locale" content="en_US" />
-    <meta property="og:title" content="Grain" />
+    <meta property="og:title" content="Grain - Neural Gradient Explorer" />
    <meta property="og:type" content="website" />
    <meta
      property="og:description"
-      content="A simple demonstration of a dynamically scaled SVG-based noise & radial gradients."
+      content="Interactive gradient explorer with neural noise textures. Create, customize, and export beautiful gradients with glassmorphic UI."
    />
    <meta property="og:url" content="https://grain.xevion.dev/" />
    <meta property="og:site_name" content="Grain" />
@@ -19,10 +19,7 @@
      property="article:published_time"
      content="2022-11-25T08:54:58.977Z "
    />
-    <meta
-      property="og:image"
-      content="https://grain.xevion.dev/bg.jpeg"
-    />
+    <meta property="og:image" content="https://grain.xevion.dev/bg.jpeg" />
    <meta
      property="og:image:secure_url"
      content="https://grain.xevion.dev/bg.jpeg"
@@ -34,21 +31,18 @@
      content="A simple gradient image generated with Grain."
    />
    <meta property="og:image:type" content="jpeg" />
-    <meta
-      name="twitter:image"
-      content="https://grain.xevion.dev/bg.jpeg"
-    />
+    <meta name="twitter:image" content="https://grain.xevion.dev/bg.jpeg" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://grain.xevion.dev/" />
    <meta name="twitter:domain" content="https://grain.xevion.dev/" />
-    <meta name="twitter:title" content="Grain" />
+    <meta name="twitter:title" content="Grain - Neural Gradient Explorer" />
    <meta
      name="twitter:description"
-      content="A simple demonstration of a dynamically scaled SVG-based noise & stacked radial gradients."
+      content="Interactive gradient explorer with neural noise textures. Create, customize, and export beautiful gradients with glassmorphic UI."
    />
  </head>
  <body>
    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script prerender type="module" src="/src/index.tsx"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,33 +1,52 @@
 {
-  "name": "noise",
  "private": true,
-  "version": "1.0.0",
  "type": "module",
  "scripts": {
+    "preinstall": "npx only-allow pnpm",
    "dev": "vite",
    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
-    "@heroicons/react": "^2.0.13",
-    "@use-it/event-listener": "^0.1.7",
-    "autoprefixer": "^10.4.13",
-    "chance": "^1.1.9",
-    "postcss": "^8.4.19",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.56.1",
-    "tailwindcss": "^3.2.4",
-    "usehooks-ts": "^2.9.1"
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/roboto-mono": "^5.2.8",
+    "@fontsource/space-grotesk": "^5.2.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.1.17",
+    "cssnano": "^7.1.0",
+    "framer-motion": "^12.23.24",
+    "lucide-preact": "^0.468.0",
+    "modern-screenshot": "^4.6.6",
+    "preact": "^10.27.2",
+    "preact-iso": "^2.11.0",
+    "preact-render-to-string": "^6.6.3",
+    "random-js": "^2.1.0",
+    "tailwindcss": "^4.1.17"
  },
  "devDependencies": {
-    "@types/chance": "^1.1.3",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
-    "@vitejs/plugin-react": "^2.2.0",
-    "typescript": "^4.6.4",
-    "vite": "^3.2.4",
-    "vite-tsconfig-paths": "^3.6.0"
-  }
+    "@preact/preset-vite": "^2.10.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/preact": "^3.2.4",
+    "@types/node": "^24.10.0",
+    "@vitest/ui": "4.0.7",
+    "eslint": "^9.39.1",
+    "eslint-config-preact": "^2.0.0",
+    "happy-dom": "^20.0.10",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.1",
+    "vitest": "^4.0.7"
+  },
+  "eslintConfig": {
+    "extends": "preact"
+  },
+  "packageManager": "pnpm@9.15.1+sha512.1acb565e6193efbebda772702950469150cf12bcc764262e7587e71d19dc98a423dff9536e57ea44c49bdf790ff694e83c27be5faa23d67e0c033b583be4bfcf"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,79 +0,0 @@
-import { useInterval, useWindowSize, useToggle } from "usehooks-ts";
-import useBackground from "@/utils/useBackground";
-import Post from "@/components/Post";
-
-import {
-  ArrowPathIcon,
-  EyeIcon,
-  EyeSlashIcon,
-} from "@heroicons/react/24/solid";
-import { useMemo } from "react";
-
-function App() {
-  const { width, height } = useWindowSize();
-  const { svg, backgrounds, regenerate } = useBackground({
-    width,
-    height,
-    ratio: 0.4,
-  });
-  const [postHidden, toggleHidden] = useToggle(false);
-
-  const [iconSpinning, , setIconSpinning] = useToggle(false);
-  useInterval(
-    () => {
-      setIconSpinning(false);
-    },
-    iconSpinning ? 200 : null
-  );
-
-  const style = useMemo(() => {
-    return {
-      background: [`url("${svg}")`, ...backgrounds].join(", "),
-    };
-  }, [svg, backgrounds]);
-
-  return (
-    <div
-      style={style}
-      className="text-zinc-800 gradient max-w-[100vw] max-h-[100vh] overflow-clip"
-    >
-      <div className="font-inter w-full h-full bg-zinc-800/50 bg-blend-overlay">
-        <div className="grid grid-cols-12 w-full">
-          <div className="col-span-3 sm:col-span-2">
-            <button
-              className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 button"
-              onClick={() => {
-                setIconSpinning(true);
-                regenerate();
-              }}
-            >
-              <ArrowPathIcon
-                className={`transition-transform duration-200 ${
-                  iconSpinning ? "rotate-180" : "rotate-0"
-                }`}
-              />
-            </button>
-            <button
-              className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 button"
-              onClick={toggleHidden}
-            >
-              {postHidden ? <EyeIcon /> : <EyeSlashIcon />}
-            </button>
-          </div>
-          <div
-            className={`h-[100vh] transition-opacity ease-in-out duration-75 ${
-              postHidden ? "opacity-0 pointer-events-none" : ""
-            } flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-[100vh]`}
-            
-          >
-            <div className="bg-white overflow-y-auto">
-              <Post />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default App;
--- a/src/components/GlassButton.tsx
+++ b/src/components/GlassButton.tsx
@@ -0,0 +1,58 @@
+import { type ComponentChildren } from "preact";
+import { motion } from "framer-motion";
+import * as Tooltip from "@radix-ui/react-tooltip";
+
+interface GlassButtonProps {
+  children: ComponentChildren;
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+  tooltip?: string;
+  "aria-label"?: string;
+}
+
+export function GlassButton({
+  children,
+  onClick,
+  className = "",
+  disabled = false,
+  tooltip,
+  "aria-label": ariaLabel
+}: GlassButtonProps) {
+  const button = (
+    <motion.button
+      className={`glass-button rounded-xl px-4 py-2 font-space-grotesk font-semibold text-zinc-900 outline-none focus:outline-2 outline-offset-2 focus:outline-fuchsia-500 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      whileHover={!disabled ? { scale: 1.02, y: -2 } : {}}
+      whileTap={!disabled ? { scale: 0.98, y: 0 } : {}}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }}
+    >
+      {children}
+    </motion.button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip.Provider delayDuration={200}>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            {button}
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="glass-card px-3 py-2 rounded-lg text-sm text-zinc-900 font-inter"
+              sideOffset={5}
+            >
+              {tooltip}
+              <Tooltip.Arrow className="fill-white/20" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    );
+  }
+
+  return button;
+}
--- a/src/components/GlassPanel.tsx
+++ b/src/components/GlassPanel.tsx
@@ -0,0 +1,32 @@
+import { type ComponentChildren } from "preact";
+import { motion } from "framer-motion";
+
+interface GlassPanelProps {
+  children: ComponentChildren;
+  className?: string;
+  animate?: boolean;
+}
+
+export function GlassPanel({ children, className = "", animate = true }: GlassPanelProps) {
+  const Component = animate ? motion.div : "div";
+
+  const animationProps = animate ? {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    transition: {
+      type: "spring" as const,
+      stiffness: 200,
+      damping: 25,
+      duration: 0.4
+    }
+  } : {};
+
+  return (
+    <Component
+      className={`glass-panel rounded-2xl ${className}`}
+      {...animationProps}
+    >
+      {children}
+    </Component>
+  );
+}
--- a/src/components/GradientControls.tsx
+++ b/src/components/GradientControls.tsx
@@ -0,0 +1,98 @@
+import { RefreshCw, Download } from "lucide-preact";
+import { GlassButton } from "./GlassButton";
+import { SliderControl } from "./SliderControl";
+import { PaletteSelector } from "./PaletteSelector";
+import * as Separator from "@radix-ui/react-separator";
+
+interface GradientControlsProps {
+  paletteId: string;
+  onPaletteChange: (paletteId: string) => void;
+  gradientCount: number;
+  onGradientCountChange: (count: number) => void;
+  noiseIntensity: number;
+  onNoiseIntensityChange: (intensity: number) => void;
+  onRegenerate: () => void;
+  onExport: () => void;
+}
+
+export function GradientControls({
+  paletteId,
+  onPaletteChange,
+  gradientCount,
+  onGradientCountChange,
+  noiseIntensity,
+  onNoiseIntensityChange,
+  onRegenerate,
+  onExport,
+}: GradientControlsProps) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="pl-4 pt-3 pb-2">
+        <h1 className="font-space-grotesk text-4xl font-bold tracking-tight text-zinc-50 text-shadow-md">
+          Grain
+        </h1>
+      </div>
+
+      <Separator.Root className="h-px bg-white/20" />
+
+      {/* Controls */}
+      {/* Palette Selector */}
+      <PaletteSelector
+        className="px-6 py-4"
+        selectedPaletteId={paletteId}
+        onSelect={onPaletteChange}
+      />
+
+      <Separator.Root className="h-px bg-white/20" />
+
+      {/* Gradient Count Slider */}
+      <SliderControl
+        label="Gradients"
+        value={gradientCount}
+        onChange={onGradientCountChange}
+        min={2}
+        max={8}
+        step={1}
+        className="px-6 py-4"
+      />
+
+      {/* Noise Intensity Slider */}
+      <SliderControl
+        label="Noise"
+        value={noiseIntensity}
+        onChange={onNoiseIntensityChange}
+        min={0}
+        max={1.5}
+        step={0.1}
+        formatValue={(v) => `${Math.round(v * 100)}%`}
+        className="px-6 py-4"
+      />
+
+      <Separator.Root className="h-px bg-white/20" />
+
+      {/* Action Buttons */}
+      <div className="flex flex-col gap-2 mx-6 my-4">
+        <GlassButton
+          onClick={onRegenerate}
+          className="w-full flex items-center justify-center gap-2"
+          tooltip="Regenerate gradient (R)"
+          aria-label="Regenerate gradient"
+        >
+          <RefreshCw size={18} />
+          <span>Regenerate</span>
+        </GlassButton>
+
+        <GlassButton
+          onClick={onExport}
+          className="w-full flex items-center justify-center gap-2"
+          tooltip="Export gradient (E)"
+          aria-label="Export gradient"
+        >
+          <Download size={18} />
+          <span>Export</span>
+        </GlassButton>
+      </div>
+    </div>
+  );
+}
--- a/src/components/PaletteSelector.tsx
+++ b/src/components/PaletteSelector.tsx
@@ -0,0 +1,63 @@
+import { COLOR_PALETTES, type ColorPalette } from "../utils/palettes";
+import { motion } from "framer-motion";
+
+interface PaletteSelectorProps {
+  selectedPaletteId: string;
+  onSelect: (paletteId: string) => void;
+  className?: string;
+}
+
+export function PaletteSelector({
+  selectedPaletteId,
+  onSelect,
+  className,
+}: PaletteSelectorProps) {
+  return (
+    <div className={`space-y-2 ${className}`}>
+      <label className="font-space-grotesk text-sm font-semibold uppercase tracking-wide text-zinc-50 text-shadow-md">
+        Color Palette
+      </label>
+      <div className="grid grid-cols-2 gap-2">
+        {COLOR_PALETTES.map((palette) => (
+          <PaletteSwatch
+            key={palette.id}
+            palette={palette}
+            isSelected={palette.id === selectedPaletteId}
+            onClick={() => onSelect(palette.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface PaletteSwatchProps {
+  palette: ColorPalette;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+function PaletteSwatch({ palette, isSelected, onClick }: PaletteSwatchProps) {
+  return (
+    <motion.button
+      className="glass-input rounded-lg p-2 flex flex-col gap-1.5 cursor-pointer outline-none transition-all"
+      onClick={onClick}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }}
+    >
+      <div className="flex gap-0.5 h-3">
+        {palette.colors.slice(0, 6).map((color, index) => (
+          <div
+            key={index}
+            className="flex-1 rounded-sm"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+      <span className="text-xs font-inter text-zinc-900 text-center">
+        {palette.name}
+      </span>
+    </motion.button>
+  );
+}
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -1,76 +0,0 @@
-import { SparklesIcon } from "@heroicons/react/20/solid";
-import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
-
-const Post = () => {
-  return (
-    <>
-      <div className="m-5 md:m-8 md:mt-5 w-[90%]">
-        <div className="mb-5">
-          <h2 className="text-3xl md:text-4xl pb-1 tracking-wide font-semibold drop-shadow-xl">
-            Grain
-          </h2>
-          <span className="pl-1 py-1 text-zinc-500">
-            Created by{" "}
-            <a
-              href="https://xevion.dev"
-              target="_blank"
-              className="transition-colors text-sky-800 hover:text-sky-600"
-            >
-              Ryan Walters
-            </a>
-            <a
-              href="https://github.com/Xevion"
-              target="_blank"
-              className="hover:text-yellow-600 transition-colors cursor-pointer"
-            >
-              <SparklesIcon className="h-4 inline mb-2.5 m-2 " />
-            </a>
-          </span>
-        </div>
-        <div className="space-y-4">
-          <p className="semibold-children">
-            A small experiment on creating beautiful, dynamic backgrounds with
-            colorful gradients & film grain. Built in <b>React</b> & <b>Vite</b>{" "}
-            with <b>SVGs</b> and layers of <b>Radial Gradients</b>.
-          </p>
-          <p>
-            This app was inspired by the gradients used{" "}
-            <a
-              href="https://www.instagram.com/p/ClUe3ONJaER/"
-              target="_blank"
-              className="text-sky-800 hover:text-sky-600"
-            >
-              certain popular instagram post
-            </a>{" "}
-            with beautiful gradients and a slight film grain applied. I wanted
-            to create something similar, but in a website form.
-          </p>
-          <p>
-            By using a SVG with a{" "}
-            <pre className="inline">&lt;feTurbulence&gt;</pre> filter inside,
-            stacked upon several <pre className="inline">radial-gradient</pre>{" "}
-            background images, the same effect can be created. Since SVGs do not
-            naturally repeat internally, the SVG itself must be generated in
-            such a way that the noise always displays the same way.
-          </p>
-          <p>
-            React comes in handy here, allowing composition of an SVG, and then
-            conversion to a <pre className="inline">base64</pre> encoded string.
-            As a <pre className="inline">base64</pre> image, it can be fed into
-            the <pre className="inline">background</pre> CSS property, allowing
-            dynamic SVG generation.
-          </p>
-          <div className="pt-3">
-            <a href="https://github.com/Xevion/grain">
-              <div className="inline text-white text-medium drop-shadow-lg rounded border-2 shadow-xl border-zinc-600/75 m-2 p-2 bg-gradient-to-r from-red-500 via-orange-500 to-orange-700">
-                In Progress
-                <ShieldExclamationIcon className="inline h-[1.4rem] ml-3 drop-shadow-2xl" />
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-export default Post;
--- a/src/components/SliderControl.tsx
+++ b/src/components/SliderControl.tsx
@@ -0,0 +1,52 @@
+import * as Slider from "@radix-ui/react-slider";
+
+interface SliderControlProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+export function SliderControl({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  formatValue = (v) => v.toString(),
+  className,
+}: SliderControlProps) {
+  return (
+    <div className={`space-y ${className}`}>
+      <div className="flex justify-between items-center">
+        <label className="font-space-grotesk text-sm font-semibold uppercase tracking-wide text-zinc-50 text-shadow-md">
+          {label}
+        </label>
+        <span className="font-inter text-sm text-zinc-100 text-shadow-md">
+          {formatValue(value)}
+        </span>
+      </div>
+      <Slider.Root
+        className="relative flex items-center select-none touch-none w-full h-6"
+        value={[value]}
+        onValueChange={([newValue]) => onChange(newValue)}
+        min={min}
+        max={max}
+        step={step}
+      >
+        <Slider.Track className="glass-input relative grow rounded-full h-3">
+          <Slider.Range className="absolute bg-white/40 rounded-full h-full" />
+        </Slider.Track>
+        <Slider.Thumb
+          className="block w-6 h-6 glass-button rounded-full focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 cursor-grab active:cursor-grabbing"
+          aria-label={label}
+        />
+      </Slider.Root>
+    </div>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,108 @@
+@import "@fontsource/space-grotesk/400.css";
+@import "@fontsource/space-grotesk/600.css";
+@import "@fontsource/space-grotesk/700.css";
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";
+@import "@fontsource/inter/600.css";
+@import "@fontsource/roboto-mono/400.css";
+@import "tailwindcss";
+
+@theme {
+  --font-family-space-grotesk: "Space Grotesk", sans-serif;
+  --font-family-inter: "Inter", sans-serif;
+  --font-family-mono: "Roboto Mono", monospace;
+
+  --box-shadow-inner-md: inset 1px 4px 6px 0 rgb(0 0 0 / 0.1);
+  --box-shadow-inner-md-2: inset 2px 2px 6px 0 rgb(0 0 0 / 0.15);
+  --box-shadow-inner-md-3: inset 2px 4px 6px 0 rgb(0 0 0 / 0.21);
+  --box-shadow-inner-md-4: inset 2px 4px 10px 0 rgb(0 0 0 / 0.28);
+  --box-shadow-inner-lg: inset 4px 5px 7px 0 rgb(0 0 0 / 0.2);
+  --box-shadow-inner-xl: inset 4px 9px 9px 0 rgb(0 0 0 / 0.3);
+  --box-shadow-inner-2xl: inset 4px 11px 12px 0 rgb(0 0 0 / 0.3);
+
+  --screens-xs: 450px;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  @apply text-zinc-800 bg-zinc-400;
+}
+
+body {
+  @apply min-w-screen min-h-screen;
+}
+
+.gradient {
+  filter: contrast(150%) brightness(90%);
+  background-blend-mode: overlay;
+}
+
+.button {
+  @apply border-zinc-50/70 border outline-none focus:outline-2 outline-offset-2 focus:outline-fuchsia-500;
+}
+
+.semibold-children {
+  & b {
+    font-weight: 600;
+  }
+}
+
+pre.inline {
+  @apply text-zinc-900;
+}
+
+/* Glassmorphism utilities */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(50px) saturate(100%);
+  /* -webkit-backdrop-filter: blur(10px) saturate(80%); */
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.glass-button {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px) saturate(60%);
+  -webkit-backdrop-filter: blur(10px) saturate(60%);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+}
+
+.glass-button:hover {
+  background: rgba(255, 255, 255, 0.55);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+
+.glass-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.glass-input {
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(8px) saturate(60%);
+  -webkit-backdrop-filter: blur(8px) saturate(60%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(15px) saturate(50%);
+  -webkit-backdrop-filter: blur(15px) saturate(50%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,90 @@
+import { hydrate, prerender as ssr } from "preact-iso";
+import { useMemo, useState, useEffect } from "preact/hooks";
+
+import "./index.css";
+
+import { useViewportSize } from "./utils/useViewportSize";
+import useBackground from "./utils/useBackground";
+import { GlassPanel } from "./components/GlassPanel";
+import { GradientControls } from "./components/GradientControls";
+import { getPaletteById } from "./utils/palettes";
+import { exportGradientAsPNG } from "./utils/exportGradient";
+
+export function App() {
+  const { width, height } = useViewportSize();
+
+  // Gradient state
+  const [paletteId, setPaletteId] = useState("classic");
+  const [gradientCount, setGradientCount] = useState(5);
+  const [noiseIntensity, setNoiseIntensity] = useState(0.9);
+
+  const palette = getPaletteById(paletteId);
+
+  const { svg, backgrounds, regenerate } = useBackground({
+    width,
+    height,
+    ratio: 0.4,
+    paletteColors: palette.colors,
+    gradientCount,
+    noiseIntensity,
+  });
+
+  const gradientStyle = useMemo(() => {
+    return {
+      background: [`url("${svg}")`, ...backgrounds].join(", "),
+    };
+  }, [svg, backgrounds]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "r" || e.key === "R") {
+        e.preventDefault();
+        regenerate();
+      } else if (e.key === "e" || e.key === "E") {
+        e.preventDefault();
+        exportGradientAsPNG();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [regenerate]);
+
+  return (
+    <>
+      {/* Full-screen gradient background */}
+      <div
+        id="gradient-container"
+        style={gradientStyle}
+        className="w-full h-screen gradient text-zinc-800 overflow-clip"
+      >
+        <div className="w-full h-full bg-zinc-800/50 bg-blend-overlay" />
+      </div>
+
+      {/* Fixed overlay panel on left */}
+      <div className="absolute top-0 left-0 w-[400px] h-screen pointer-events-none">
+        <GlassPanel className="m-6 h-[calc(100vh-3rem)] pointer-events-auto">
+          <GradientControls
+            paletteId={paletteId}
+            onPaletteChange={setPaletteId}
+            gradientCount={gradientCount}
+            onGradientCountChange={setGradientCount}
+            noiseIntensity={noiseIntensity}
+            onNoiseIntensityChange={setNoiseIntensity}
+            onRegenerate={regenerate}
+            onExport={() => exportGradientAsPNG()}
+          />
+        </GlassPanel>
+      </div>
+    </>
+  );
+}
+
+if (typeof window !== "undefined") {
+  hydrate(<App />, document.getElementById("root"));
+}
+
+export async function prerender(data: any) {
+  return await ssr(<App {...data} />);
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "@/components/App";
-import "@/styles/index.scss";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,47 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-
-    color-scheme: light dark;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-
-    @apply text-zinc-800 bg-zinc-400;
-}
-
-body {
-    @apply min-w-[100vw] min-h-[100vh];
-}
-
-.gradient {
-    filter: contrast(150%) brightness(90%);
-    background-blend-mode: overlay;
-}
-
-.button {
-    @apply border-zinc-50/70 border outline-none focus:outline-2 outline-offset-2 focus:outline-fuchsia-500;
-}
-
-.semibold-children {
-    & b {
-        font-weight: 600;
-    }
-}
-
-pre.inline {
-    @apply text-zinc-900;
-}
--- a/src/test/App.test.tsx
+++ b/src/test/App.test.tsx
@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { h } from "preact";
+import { render } from "@testing-library/preact";
+import type { FunctionComponent } from "preact";
+
+describe("App", () => {
+  let App: FunctionComponent;
+
+  beforeEach(async () => {
+    // Mock window dimensions for useViewportSize hook
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 1920,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 1080,
+    });
+
+    // Mock btoa for useBackground hook
+    global.btoa = vi.fn((str) => Buffer.from(str).toString("base64"));
+
+    // Dynamically import App after mocks are set up
+    const module = await import("../index");
+    App = module.App;
+  });
+
+  it("renders without crashing", () => {
+    expect(() => render(h(App, {}))).not.toThrow();
+  });
+
+  it("renders the main heading", () => {
+    const { getAllByText } = render(h(App, {}));
+    expect(getAllByText("Grain").length).toBeGreaterThan(0);
+  });
+
+  it("renders the tagline", () => {
+    const { getAllByText } = render(h(App, {}));
+    expect(getAllByText("Neural Gradient Explorer").length).toBeGreaterThan(0);
+  });
+
+  it("renders with gradient class", () => {
+    const { container } = render(h(App, {}));
+    expect(container.innerHTML).toContain("gradient");
+  });
+});
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom/vitest";
+import "preact/debug";
--- a/src/utils/exportGradient.ts
+++ b/src/utils/exportGradient.ts
@@ -0,0 +1,20 @@
+import { domToPng } from "modern-screenshot";
+
+/**
+ * Export the gradient as a PNG screenshot
+ */
+export async function exportGradientAsPNG(
+  elementId: string = "gradient-container"
+): Promise<void> {
+  const element = document.querySelector(`#${elementId}`);
+  if (!element) {
+    throw new Error("Gradient element not found");
+  }
+
+  const dataUrl = await domToPng(element as HTMLElement);
+
+  const link = document.createElement("a");
+  link.download = `grain-gradient-${Date.now()}.png`;
+  link.href = dataUrl;
+  link.click();
+}
--- a/src/utils/palettes.ts
+++ b/src/utils/palettes.ts
@@ -0,0 +1,52 @@
+export interface ColorPalette {
+  id: string;
+  name: string;
+  colors: string[];
+}
+
+export const COLOR_PALETTES: ColorPalette[] = [
+  {
+    id: "classic",
+    name: "Classic",
+    colors: ["#ed625d", "#42b6c6", "#f79f88", "#446ba6", "#4b95f0", "#d16ba5"]
+  },
+  {
+    id: "sunset",
+    name: "Sunset",
+    colors: ["#ff6b6b", "#f9ca24", "#ee5a6f", "#c56cf0", "#ff9ff3", "#feca57"]
+  },
+  {
+    id: "ocean",
+    name: "Ocean",
+    colors: ["#0077be", "#00d4ff", "#0099cc", "#66d3ff", "#1e90ff", "#4ecdc4"]
+  },
+  {
+    id: "forest",
+    name: "Forest",
+    colors: ["#2ecc71", "#27ae60", "#16a085", "#1abc9c", "#52c97f", "#00b894"]
+  },
+  {
+    id: "aurora",
+    name: "Aurora",
+    colors: ["#a29bfe", "#6c5ce7", "#fd79a8", "#e17055", "#00b894", "#00cec9"]
+  },
+  {
+    id: "fire",
+    name: "Fire",
+    colors: ["#ff4757", "#ff6348", "#ff7f50", "#ffa502", "#ff6b81", "#ee5a6f"]
+  },
+  {
+    id: "cosmic",
+    name: "Cosmic",
+    colors: ["#5f27cd", "#341f97", "#ee5a6f", "#c44569", "#f368e0", "#ff9ff3"]
+  },
+  {
+    id: "monochrome",
+    name: "Monochrome",
+    colors: ["#2d3436", "#636e72", "#b2bec3", "#dfe6e9", "#74b9ff", "#a29bfe"]
+  }
+];
+
+export function getPaletteById(id: string): ColorPalette {
+  return COLOR_PALETTES.find(p => p.id === id) || COLOR_PALETTES[0];
+}
--- a/src/utils/useBackground.tsx
+++ b/src/utils/useBackground.tsx
@@ -1,12 +1,14 @@
-import { Chance } from "chance";
-import { useMemo, useState } from "react";
-import ReactDOMServer from "react-dom/server";
-import { getEdgePoint } from "@/utils/helpers";
+import { Random } from "random-js";
+import { useMemo, useState, useEffect } from "preact/hooks";
+import { getEdgePoint } from "./helpers";

 interface useBackgroundProps {
  width: number;
  height: number;
  ratio: number;
+  paletteColors: string[];
+  gradientCount?: number;
+  noiseIntensity?: number;
 }

 interface useBackgroundReturn {
@@ -15,23 +17,14 @@ interface useBackgroundReturn {
  svg: string;
 }

-const chance = Chance();
-const palettes = [
-  //   ["#5e1e1e", "#141414", "#400000", "#7a0000", "#2b0059", "#000c59", "#850082", "#850052"],
-  ["#ed625d", "#42b6c6", "#f79f88", "#446ba6", "#4b95f0", "#d16ba5"],
-];
+const random = new Random();

-const generateBackground = (): string[] => {
-  const palette = chance.pick(palettes);
-  return Array(5)
+const generateBackground = (paletteColors: string[], count: number): string[] => {
+  return Array(count)
    .fill(null)
-    .map(() => chance.pickone(palette))
+    .map(() => random.pick(paletteColors))
    .map((color) => {
-      const [x, y] = getEdgePoint(
-        chance.integer({ min: 0, max: 400 }),
-        100,
-        100
-      );
+      const [x, y] = getEdgePoint(random.integer(0, 400), 100, 100);
      return `radial-gradient(farthest-corner at ${x}% ${y}%, ${color}, transparent 100%)`;
    });
 };
@@ -40,42 +33,35 @@ const useBackground = ({
  width,
  height,
  ratio,
+  paletteColors,
+  gradientCount = 5,
+  noiseIntensity = 0.9,
 }: useBackgroundProps): useBackgroundReturn => {
-  const [background, setBackground] = useState(generateBackground());
+  const [background, setBackground] = useState(() => generateBackground(paletteColors, gradientCount));
+
+  // Regenerate when palette or count changes
+  useEffect(() => {
+    setBackground(generateBackground(paletteColors, gradientCount));
+  }, [paletteColors, gradientCount]);

  const regenerate = () => {
-    setBackground(generateBackground());
+    setBackground(generateBackground(paletteColors, gradientCount));
  };

-  const noise = useMemo(() => {
+  const noise = (): string => {
    const svgWidth = Math.ceil((width ?? 1920) * ratio);
    const svgHeight = Math.ceil((height ?? 1080) * ratio);
-    return (
-      <svg
-        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <filter id="noiseFilter">
-          <feTurbulence
-            type="fractalNoise"
-            baseFrequency="2.1"
-            numOctaves="2"
-            seed={chance.natural()}
-            stitchTiles="stitch"
-          />
-        </filter>
-        <g opacity={0.9}>
-          <rect width="100%" height="100%" filter="url(#noiseFilter)" />
-        </g>
-      </svg>
-    );
-  }, [width, height, ratio]);
+    const seed = random.integer(0, 1000000);
+
+    return `<svg viewBox="0 0 ${svgWidth} ${svgHeight}" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="2.1" numOctaves="2" seed="${seed}" stitchTiles="stitch"/></filter><g opacity="${noiseIntensity}"><rect width="100%" height="100%" filter="url(#noiseFilter)"/></g></svg>`;
+  };

  return {
    regenerate,
-    svg: `data:image/svg+xml;base64,${window.btoa(
-      ReactDOMServer.renderToString(noise)
-    )}`,
+    svg:
+      typeof window !== "undefined"
+        ? `data:image/svg+xml;base64,${window.btoa(noise())}`
+        : "",
    backgrounds: background,
  };
 };
--- a/src/utils/useBooleanToggle.ts
+++ b/src/utils/useBooleanToggle.ts
@@ -0,0 +1,18 @@
+import { useCallback, useState } from "preact/hooks";
+
+export function useBooleanToggle(
+  initialValue: boolean = false
+): [boolean, (nextValue?: boolean) => void] {
+  const [value, setValue] = useState<boolean>(initialValue);
+
+  const toggle = useCallback((nextValue?: boolean) => {
+    if (typeof nextValue === "boolean") {
+      setValue(nextValue);
+      return;
+    }
+    setValue((prev) => !prev);
+  }, []);
+
+  return [value, toggle];
+}
+
--- a/src/utils/useViewportSize.ts
+++ b/src/utils/useViewportSize.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "preact/hooks";
+
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
+
+export function useViewportSize(): ViewportSize {
+  const [size, setSize] = useState<ViewportSize>({
+    width: typeof window !== "undefined" ? window.innerWidth : 0,
+    height: typeof window !== "undefined" ? window.innerHeight : 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return size;
+}
+
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,28 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      screens: {
-        xs: "450px",
-      },
-      boxShadow: {
-        "inner-md": "inset 1px 4px 6px 0 rgb(0 0 0 / 0.1)",
-        "inner-md-2": "inset 2px 2px 6px 0 rgb(0 0 0 / 0.15)",
-        "inner-md-3": "inset 2px 4px 6px 0 rgb(0 0 0 / 0.21)",
-        "inner-md-4": "inset 2px 4px 10px 0 rgb(0 0 0 / 0.28)",
-        "inner-lg": "inset 4px 5px 7px 0 rgb(0 0 0 / 0.2)",
-        "inner-xl": "inset 4px 9px 9px 0 rgb(0 0 0 / 0.3)",
-        "inner-2xl": "inset 4px 11px 12px 0 rgb(0 0 0 / 0.3)",
-      },
-      fontFamily: {
-        opensans: ['"Open Sans"', "sans-serif"],
-        inter: ['"Inter"', "sans-serif"],
-        mono: ['"Roboto Mono"', "monospace"],
-        raleway: ['"Raleway"', "sans-serif"],
-        roboto: ['"Roboto"'],
-      },
-    },
-  },
-  plugins: [],
-};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,25 @@
 {
  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "target": "ES2020",
    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
+    "moduleResolution": "bundler",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "noEmit": true,
+    "allowJs": true,
+    "checkJs": true,
+
+    /* Preact Config */
    "jsx": "react-jsx",
-    "baseUrl": "./src/",
+    "jsxImportSource": "preact",
+    "skipLibCheck": true,
+    "baseUrl": "./",
    "paths": {
-      "@/*": ["./*"]
-    }
+      "react": ["node_modules/preact/compat/"],
+      "react-dom": ["node_modules/preact/compat/"],
+      "@/*": ["src/*"]
+    },
+
+    "outDir": "./dist"
  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["node_modules/vite/client.d.ts", "src"]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,30 @@
-import { defineConfig, loadEnv  } from 'vite'
-import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig, loadEnv } from "vite";
+import preact from "@preact/preset-vite";
+import tailwindcss from "@tailwindcss/vite";
+import { visualizer } from "rollup-plugin-visualizer";
+import cssnano from "cssnano";

 // https://vitejs.dev/config/
-export default ({mode }) => {
-  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+export default ({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
-    base: '/',
-    plugins: [react(), tsconfigPaths()],
-  })
-}
+    base: "/",
+    plugins: [
+      preact({
+        prerender: {
+          enabled: true,
+          renderTarget: "#root",
+        },
+      }),
+      tailwindcss(),
+      visualizer({
+        template: "treemap",
+        open: true, // Automatically open the report in your browser after build
+        filename: "stats.html", // Output file name
+        gzipSize: true, // Show gzip size
+        brotliSize: true, // Show brotli size
+      }),
+    ],
+  });
+};
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vitest/config";
+import preact from "@preact/preset-vite";
+
+export default defineConfig({
+  plugins: [preact()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+    coverage: {
+      reporter: ["text", "json", "html"],
+      exclude: [
+        "node_modules/",
+        "src/test/",
+        "**/*.config.ts",
+        "**/*.d.ts",
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      "react": "preact/compat",
+      "react-dom": "preact/compat",
+      "react-dom/test-utils": "preact/test-utils",
+    },
+    dedupe: ["preact"],
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Ryan Walters	f5090b9c10	refactor: simplify export to PNG-only, improve controls UI - Replace html2canvas with modern-screenshot for better performance - Remove ExportModal and CSS export functionality - Simplify export to single PNG download - Improve controls layout with better spacing and text shadows - Increase glass-panel opacity for better readability - Remove unused ExportData interface and CSS generation utilities	2025-11-06 23:40:43 -06:00
Ryan Walters	6834aa308f	feat: add interactive gradient controls with glassmorphic UI Implement comprehensive gradient customization with neural noise textures, including palettes, export functionality, and Radix UI components with framer-motion animations.	2025-11-06 22:55:06 -06:00
Ryan Walters	e632e69b91	feat: migrate from React to Preact, add Vitest testing, and optimize bundle Major framework and tooling changes: - Migrate from React 19 to Preact 10 with preact-iso for routing - Replace @mantine/hooks with custom hooks (useBooleanToggle, useViewportSize) - Switch from @heroicons/react to lucide-preact for icons - Replace chance.js with random-js for RNG Testing infrastructure: - Add Vitest with @testing-library/preact and happy-dom - Set up test configuration and initial App tests - Add Vitest UI for interactive test running Build optimizations: - Add cssnano for CSS minification - Configure aggressive bundle optimizations in Vite - Update to Tailwind CSS 4.1.17 Project structure: - Consolidate entry point from main.tsx to index.tsx - Reorganize CSS location (styles/index.css → index.css) - Add ESLint with preact config - Update TypeScript configuration for Preact	2025-11-06 21:56:53 -06:00
Xevion	d668a21750	feat: switch to mantine-hooks, random-js, add cssnano & aggressive bundle optimizations, remove chance/usehooks/lodash	2025-08-09 13:40:04 -05:00
Xevion	75913606f4	chore: raise chunkSizeWarningLimit	2025-08-09 13:21:58 -05:00
Xevion	4d0bdeac7e	fix: translate tailwind config into css theme config,r emove postcss	2025-08-09 13:20:52 -05:00
Xevion	683e504c9c	chore: update tailwindcss to v4, remove sass, use vite plugin for tailwindcss	2025-08-09 13:16:34 -05:00
Xevion	048701580d	chore: update all dependencies, switch to pnpm	2025-08-09 13:09:17 -05:00