https://github.com/xevion/grain

A simple demonstration of dynamically scaled SVG-based noise & stacked radial gradients.
https://github.com/xevion/grain

film-grain github-pages grain noise react static-site svg typescript vercel vite yarn

Last synced: 5 months ago
JSON representation

A simple demonstration of dynamically scaled SVG-based noise & stacked radial gradients.

• Host: GitHub
• URL: https://github.com/xevion/grain
• Owner: Xevion
• License: gpl-3.0
• Created: 2022-11-25T06:21:44.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-11-07T03:57:10.000Z (8 months ago)
• Last Synced: 2025-11-07T05:35:11.207Z (8 months ago)
• Topics: film-grain, github-pages, grain, noise, react, static-site, svg, typescript, vercel, vite, yarn
• Language: TypeScript
• Homepage: https://grain.xevion.dev
• Size: 2.74 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Grain Project - Banner Image][grain-banner]][grain-website]

[![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/)

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

- **Customizable gradients & noise** via SVG filters

- **Preset palettes** for quick styling

- **PNG export** with a single click

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/).

## Usage

```bash

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

```

## License

Licensed under the [GNU General Public License v3.0](LICENSE).

[grain-banner]: ./.media/banner.jpeg

[grain-website]: https://grain.xevion.dev/