What is Parallax Designer?
Parallax Designer is a browser-based visual editor for designing, fine-tuning, and exporting multi-layer CSS parallax scenes. It gives you real-time control over layered depth effects driven by pointer movement and sine-wave floating animations, all rendered with GPU-accelerated CSS transforms.
Key Capabilities
- Visual scene editing — Build parallax scenes with up to 30 stacked image layers, each independently configurable for position, size, motion, and background styling.
- Real-time preview — See every change immediately in a fullscreen viewport with live pointer-tracking parallax and floating animations.
- Parametric motion control — Adjust per-layer lerp smoothing, directional movement, scale boost, and dual-frequency sine-wave float on both axes.
- Full CSS background styling — Configure position anchoring, size mode, repeat, blend mode, color, origin, and clip per layer.
- Preset system — Start from templates, apply built-in presets (Default, Dreamy, Responsive, Subtle, Dramatic), or save your own custom presets locally.
- Export options — Copy JSON, import JSON payloads, and download self-contained runtime HTML files.
- Local-first — Images and custom presets are stored in the browser's IndexedDB. No server or account required.
- Internationalized — Full English and French UI with a custom typed i18n system.
Live Demo
Try the app at robert-hoffmann.github.io/parallax-designer.
Screenshots
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Vue 3 — Composition API, <script setup> |
| Build | Vite 7 |
| Styling | Tailwind CSS 4 |
| Language | TypeScript 5.9 — strict mode |
| Local Storage | Dexie — IndexedDB wrapper |
| Utilities | VueUse, SortableJS |
| Color Picker | vue-color |
| Docs | VitePress |
| Deployment | GitHub Pages via GitHub Actions |
Source Code
The project is open source on GitHub: robert-hoffmann/parallax-designer.