🎨 Fluidframe

The Web-First Visual Studio for Modern Creators

Design high-impact 3D device mockups, real-time WebGL fluid mesh gradients, retro Bayer dither shaders, and render studio-grade 60 FPS MP4 videos & 4K snapshots directly in your browser — with zero server lag and 100% privacy.

Explore Live Demo (fluidframe.vercel.app) • Launch Editor • Report Bug

---

🌟 Why Fluidframe?

Most graphic design tools are either too basic or weighed down by bulky timelines, expensive subscriptions, and slow cloud rendering queues.

Fluidframe brings GPU-accelerated graphic design and video rendering straight into the browser:

• 🚀 100% Client-Side & Private: All WebGL rendering, dither calculations, and video transcoding happen directly on your machine via WebAssembly. Your images never leave your browser.
• ⚡ Instant Workflow: Zero setup, no account barrier, no paywalls. Open the editor and start crafting immediately.
• 🎬 Broadcast-Quality Exports: Export crisp 60 FPS MP4 videos, optimized GIFs, and Retina PNG / JPEG / SVG graphics in seconds.

---

✨ Core Features & Superpowers

🌊 1. Fluid WebGL Mesh Gradient Engine

• Hardware-Accelerated GLSL Shaders: Real-time multi-color fluid gradient synthesis running on custom vertex & fragment shaders.
• 5-Point Fluid Color Mixing: Blend rich color harmonies with dynamic wave speed, frequency, noise intensity, and grain controls.
• Curated Palette Library: One-click presets (Chrome, Sunset Silk, Aurora, Velvet Noir, Vaporwave, Solar Flare, Deep Ocean).
• Interactive Shader Animation: Play, pause, or adjust animation speed on the fly with live canvas playback.

👾 2. Multi-Algorithm Dithering & Pixel Studio

• Retro Shader Pipeline: Transform any image layer or canvas background into stylized retro computer graphics.
• Multiple Dither Modes: Ordered Bayer matrices (2x2, 4x4, 8x8), Floyd-Steinberg, Atkinson, and Halftone / Noise dithering.
• Custom Dual-Tone Color Mapping: Map shadows and highlights to custom foreground and background colors with adjustable color steps and pixel scale.

📱 3. 3D Perspective Device Mockup Studio

• True 3D Transforms: Full 3-axis rotation (rotateX, rotateY, rotateZ) to create isometric and perspective product showcases.
• Device Clip Paths & Mockups: One-click device frames (Mobile Screen, Browser Window, Pill, Diamond, Hexagon, Polygon).
• Studio Glassmorphism: Realistic frosted glass backdrops with customizable blur radii and translucent specular borders.
• Studio Lighting & Shadows: Layer shadow presets (Soft, Floating, 3D Elevation, Dramatic Neon Glow) with custom color, offset, and spread.

✍️ 4. Advanced Typography & Vector Overlays

• 13+ Premium Google Fonts: Curated modern typography (Inter, Manrope, Geist, Space Grotesk, Instrument Serif, Poppins, Playfair Display, Oswald, Montserrat).
• Multi-Stop Text Gradients: Linear gradient typography with customizable directions (to right, to bottom, to bottom right, etc.) and multi-stop color accents.
• Text Box Embellishments: Pill background badges, glassmorphic labels, border strokes, and vertical text writing modes.
• Vector Pattern Overlays: Crisp vector patterns (Isometric Grid, Blueprint, Cross Grid, Dots, Diagonal Stripes) with custom color and opacity.
• Studio Texture Overlays: Realistic tactile overlays (Grain, Noise, Paper, Grunge, Scanlines, Dust).

🎞️ 5. In-Browser WASM FFmpeg Video & Animation Export

• No Cloud Queue: Utilizes client-side @ffmpeg/ffmpeg compiled to WebAssembly with dedicated Web Worker processing.
• MP4 Video Export (H.264): Export smooth animated WebGL canvas videos with custom durations (3–10s) and frame rates (30 / 60 FPS).
• Optimized GIF Export: Generates high-quality animated GIFs with smart palette quantization.
• Retina Image Snapshots: Crisp static exports in PNG, JPEG, and SVG at 1x, 2x, or 4x pixel density.

🖼️ 6. Curated Asset Library (ImageKit Integration)

• 4K Wallpaper Hub: High-definition abstract, dark, 3D, and minimal wallpapers available instantly inside the editor.
• Meme & Sticker Vault: Curated viral templates and stickers for fast social media content creation.

⚡ 7. Ergonomic Creator Experience

• Smart Magnetic Snap Guides: Automatic center and edge alignment guides for pixel-perfect positioning.
• Multi-Layer Management: Reorder layers with drag-and-drop, toggle visibility (show/hide), duplicate, and lock layers.
• Canvas Zoom & Viewport: Fit to screen, free zoom slider, and toggleable pixel grid background.
• Full History Stack: Instant undo (Ctrl+Z) and redo (Ctrl+Y / Ctrl+Shift+Z) for all canvas actions.
• Dark & Light Mode: Seamless theme switching with persistent user preference.

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + Z / Cmd + Z	Undo last action
Ctrl + Y / Cmd + Shift + Z	Redo action
Ctrl + D / Cmd + D	Duplicate selected layer
Delete / Backspace	Delete selected layer
Escape	Deselect active layer
S	Toggle magnetic snapping guides
G	Toggle canvas alignment grid

---

🛠️ Architecture & Tech Stack

Layer	Technology	Description
Framework	Next.js 16 (App Router)	Turbo-packed React server components & client routing
UI Library	React 19	Concurrent UI rendering & state orchestration
Language	TypeScript 5	Strict type safety across shaders, models, and stores
Styling	Tailwind CSS v4	Modern CSS engine with @tailwindcss/postcss
Component Primitives	Radix UI	Accessible tabs, popovers, dialogs, sliders, and switches
Animations	Motion (Framer Motion)	Smooth layout transitions, drawers, and gesture physics
State Management	Zustand 5	Lightweight global canvas state with deep history tracking
Graphics & Shaders	WebGL (GLSL ES 1.0/3.0)	High-performance custom shaders for fluid mesh gradients
Video Transcoding	FFmpeg.wasm 0.12	In-browser H.264 MP4 & GIF encoding via WebAssembly
Asset CDN	ImageKit	Fast cloud delivery of 4K wallpapers and meme assets
Database & ORM	Prisma 7 + PostgreSQL	Ready for optional database integrations and presets
Icons	Lucide React & Phosphor Icons	Consistent, crisp iconography

---

📂 Project Structure

fluidframe/
├── app/
│   ├── api/
│   │   └── imagekit/         # ImageKit asset endpoints (wallpapers, memes)
│   ├── editor/               # Visual Studio Editor
│   │   ├── components/
│   │   │   ├── canvas/       # WebGL canvas, image, text & vector layers
│   │   │   └── panels/       # Left sidebar, layer manager & right studio panel
│   │   ├── hooks/            # Selection, dragging & export hooks
│   │   ├── store/            # Zustand global canvas & history store
│   │   ├── utils/            # WebGL shader engine, dither engine & FFmpeg service
│   │   ├── types.ts          # Studio element & config interfaces
│   │   └── page.tsx          # Main editor workspace
│   ├── privacy/              # Privacy Policy page
│   ├── terms/                # Terms of Service page
│   ├── toc/                  # Terms & Conditions alias
│   ├── layout.tsx            # Root layout with Google Fonts & metadata
│   ├── manifest.ts           # Web App Manifest (PWA ready)
│   ├── robots.ts             # SEO robots rules
│   ├── sitemap.ts            # Dynamic XML sitemap
│   └── page.tsx              # High-conversion visual studio landing page
├── components/
│   ├── hero.tsx              # Hero showcase with live preview
│   ├── bentogrid.tsx         # Interactive feature demonstration cards
│   ├── landing/              # Interactive dither cursor & landing components
│   ├── navbar.tsx            # Smart scroll navbar
│   ├── footer.tsx            # Perspective grid footer
│   └── ui/                   # Accessible Radix UI components
├── lib/
│   ├── env.ts                # T3-OSS type-safe environment validator
│   └── utils.ts              # Class merging utilities
├── prisma/
│   ├── schema.prisma         # Prisma schema definition
│   └── migrations/           # Database migrations
└── public/
    ├── editor-dark.png       # Dark mode studio screenshot
    ├── editor-light.png      # Light mode studio screenshot
    └── ffmpeg/               # FFmpeg WebAssembly core binaries & worker

---

🚀 Getting Started

Use Node 24.18.0 and npm 11.16.0. npm is the canonical package manager; commit package-lock.json when dependencies change. .nvmrc and .node-version pin the local/Actions runtime, and package.json restricts hosted builds to Node 24.

1. Clone and select the toolchain

git clone https://github.com/Digvijay-x1/fluidframe.git
cd fluidframe
nvm install
nvm use
npm install --global npm@11.16.0

An equivalent Node version manager can read .node-version. Vercel uses Node 24.x; its runtime patch is managed by the provider. The repository's vercel.json runs the pinned npm version with a frozen install. See the toolchain guide for Actions setup and hosted settings.

2. Install and validate

npm ci
npm run check

This is the clean-checkout CI sequence. npm ci rejects manifest/lockfile drift and generates Prisma's client without connecting to a database. npm run check runs lint, formatting, type generation/typecheck, unit tests, and the production build. The core editor needs no .env, database, or production credentials. Builds fetch Google Fonts over HTTPS.

Pull requests run these checks in parallel in GitHub Actions. See the CI guide for the required gate, failure diagnostics, and repository protection.

Individual commands:

Command	Purpose
npm run lint	Next.js, React, and TypeScript lint rules
npm run format:check	Check source and documentation formatting
npm run format	Apply repository formatting
npm run typecheck	Generate Prisma and Next.js types, then run strict TypeScript
npm test	Run Vitest, including local draft recovery and environment validation
npm run build	Compile and prerender the production app

3. Configure optional integrations

For optional integrations, copy the template:

cp .env.example .env

Variable	Requirement
NEXT_PUBLIC_APP_URL	Optional HTTP(S) application URL
IMAGEKIT_ENABLED	true to enable the wallpaper/meme APIs; defaults to false
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY	Required when ImageKit is enabled
IMAGEKIT_PRIVATE_KEY	Required when ImageKit is enabled; server only
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT	Required HTTP(S) endpoint when ImageKit is enabled
DATABASE_ENABLED	true to validate configuration for optional future persistence; defaults to false
DATABASE_URL	Required PostgreSQL URL when database integration is enabled
SKIP_ENV_VALIDATION	Only the exact value true bypasses validation; omit for normal builds

Existing ImageKit deployments must add IMAGEKIT_ENABLED=true. Disabled ImageKit endpoints return HTTP 503 without contacting the provider. The editor, local uploads, IndexedDB recovery, WebGL, and exports remain available without integrations. Database persistence is not currently used by any app route; DATABASE_ENABLED validates the intended configuration and does not add persistence.

See database validation and release safety for schema checks, disposable migration tests, and requirements before enabling production persistence.

An explicit environment check runs before development, type generation, and builds; API modules also validate on load. Missing credentials for enabled integrations and invalid URLs fail before deployment. Use separate preview credentials and set flags in the environment that builds the candidate; public variables are compiled into browser bundles.

4. Launch development or production

npm run dev

Open http://localhost:3000, or the editor.

npm run build
npm start

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: add AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the Apache 2.0 License. See LICENSE for more information.

---

👨‍💻 Author & Acknowledgements

Created with ❤️ by Digvijay Rawat

• Follow on X: @DIGVIJAY__RAWAT
• GitHub: Digvijay-x1

_{Built for creators, designers, and developers around the world.}