A browser-based visual editor for designing and fine-tuning multi-layer parallax scenes. Build rich depth effects with stacked image layers, tweak motion and geometry in real time, then download a self-contained runtime HTML file you can deploy anywhere.
I've been building web products for almost 30 years, and still love geeking out over UI, UX, DX, and product details.
This repo is me stress-testing agentic AI in public
The app, UX polish, help systems, tests, docs, and deployment automation all came out of AI-driven workflows. (actually Codex 5.3 wrote 100% in this repo)
I'm also Scrum-certified (SM + PO), into business/software/tech intelligence and marketing psychology, and have been deep into AI and agentic workflows for a while now.
The goal is simple: learn what actually works, then bring those patterns into the workplace, and automate what is automatable
If you want to steal the prompts, skills, and setup patterns, check .agents/, .github/, and .vscode/
- Live App: https://robert-hoffmann.github.io/parallax-designer/
- Documentation Site: https://robert-hoffmann.github.io/parallax-designer/docs/
- GPU-accelerated
translate3d/scaletransforms driven by pointer position - Per-layer lerp (smoothing), directional movement, and scale-boost on approach
- Floating harmonics system with configurable dual-frequency sine waves on X and Y axes for organic idle motion
- Scene-level 3D perspective rotation with adjustable maximum rotation angle
- Live FPS counter to monitor rendering performance
- Support for up to 30 layers per project
- Drag-and-drop reordering with automatic z-index normalization
- Add, duplicate, rename, show/hide, and delete layers
- Per-layer geometry controls: position (top/left %), dimensions (width/height %), base Z depth, and base scale
- Per-layer motion controls: lerp, scale boost, move X/Y, float X/Y, and float speed
- Full background styling per layer: size mode (cover/contain/auto/custom), position anchoring with offset, repeat axes, blend modes, origin/clip box, and background color
- Start from a 3-layer or 4-layer template, or begin with a blank canvas
- Five built-in motion presets: Default, Dreamy, Responsive, Subtle, Dramatic
- Preset strategy: "Replace Layers" to reset structure, or "Keep Current Layers" to patch motion values onto existing layers (matched by preset key, then index fallback)
- One-click undo after preset application
- Save, load, overwrite, and delete custom presets stored locally via IndexedDB
- Upload images directly into the browser's local IndexedDB store (
idb://asset/<id>references) - Select saved images from a dropdown or provide external paths/URLs
- Asset usage tracking — see which layers reference each stored image
- Delete individual assets or clear all local data
- Copy JSON — full project payload to clipboard for backup or sharing
- Import JSON — paste or upload a
.jsonfile to restore a project - Download HTML — generates a standalone runtime HTML file with engine logic and configuration embedded, ready to deploy
- Versioned project schema (v3) with strict validation and normalization
- Out-of-range numeric values are automatically clamped to defined constraints
- Excess layers are trimmed with clear feedback
- Normalization summary shown on import so you know exactly what changed
- Responsive overlay panel with tabbed navigation: Project, Scene, Layer
- Layer inspector tabs: Basic, Geometry, Motion
- Collapsible sections for background, setup/presets, transfer, and danger-zone actions
- Double-click any slider label to reset a field to its default value
- Contextual tooltip help system with docked help panel
- Geometry guide mini-map showing layer framing relative to the viewport
- Toast notification system for user feedback
- Keyboard shortcut: press H to toggle the control panel
- Internationalization (English and French) with a language toggle
| Layer | Technology |
|---|---|
| Framework | Vue 3 (Composition API, <script setup>) |
| Build | Vite 7 |
| Styling | Tailwind CSS 4 |
| Language | TypeScript 5.9 |
| Local Storage | Dexie (IndexedDB wrapper) |
| Utilities | VueUse, SortableJS |
| Color Picker | vue-color |
| Testing | Vitest, Playwright |
| Docs | VitePress |
| Deployment | GitHub Pages via GitHub Actions |
Full documentation is available at robert-hoffmann.github.io/parallax-designer/docs/, covering:
- User Guide — UI walkthrough, layer management, backgrounds, presets, import/export
- Technical Reference — Architecture, parallax engine, data model, components, composables
- Advanced Topics — i18n, local storage, optimizations
To run the docs locally:
npm run docs:dev- Node.js
^20.19.0or>=22.12.0 - npm (ships with Node)
# Install dependencies
npm install
# Start the dev server
npm run devOpen the URL printed in the terminal (usually http://localhost:5173).
npm run buildOutput is written to dist/. Preview locally with:
npm run preview# Fast validation: i18n + docs/source sync + type check
npm run check
# CI-equivalent local gate (no browser E2E): check + unit/integration + app/docs builds
npm run verify# Unit tests (pure logic)
npm run test:unit
# Integration tests (composables + persistence boundaries)
npm run test:integration
# E2E tests (critical user journeys only)
npm run test:e2eDefault alias:
npm testThis currently maps to test:unit.
For the full testing guide, see:
src/
├── components/ # Vue SFCs — scene, editors, controls, modals
│ ├── controls/ # Reusable form controls (NumberField, SelectField, …)
│ ├── modals/ # Modal dialogs (import JSON, confirm)
│ └── project-settings/ # Settings panel accordion groups
├── composables/ # Stateful composables (project state, I/O, assets, toasts, help)
├── content/ # Help text content definitions
├── core/ # Pure logic — engine, schema, constraints, defaults, export
├── i18n/ # Internationalization config and locale files (en, fr)
└── types/ # TypeScript type definitions
tests/
├── unit/ # Fast pure-logic tests (core helpers, schema, presets, etc.)
├── integration/ # Composable + persistence boundary tests
└── e2e/ # Playwright critical user-journey tests
public/
└── media/ # Sample layer images shipped with the starter templates
docs/ # VitePress documentation site source
vitest.config.ts # Vitest configuration
playwright.config.ts # Playwright E2E configuration
See the repository for license details.