Home / Prompts / Motion & Interaction / TiltGallery — 3D Parallax Card Grid with Gyroscope

Motion & Interaction intermediate Level Tested & Verified

TiltGallery — 3D Parallax Card Grid with Gyroscope

K Kinetic Motion Lab @kineticworks | ★ 5.0 (17 reviews) | 47 builders downloaded

What You Build

4 components

Architecture Required

System Architecture & Modular Decomposition

Blueprint component for TiltGallery — 3D Parallax Card Grid with Gyroscope

Database Required

Data Schema, Entities & Persistence

Blueprint component for TiltGallery — 3D Parallax Card Grid with Gyroscope

Security Required

Authentication, RBAC & Data Protection

Blueprint component for TiltGallery — 3D Parallax Card Grid with Gyroscope

Agent Instructions Required

AI Assistant System Directives & Scaffolding Rules

Blueprint component for TiltGallery — 3D Parallax Card Grid with Gyroscope

Claim this free Build Kit to unlock all components.

✓ Claim Free Build Kit

Supported AI Agents

Cursor · optimized v0 · optimized

What the creator declares this works with. See each agent's integration type on the download/build step.

Overview & Architecture

### Overview
High-fashion portfolio grid with cards that tilt in 3D space on mouse move and mobile device gyroscope tilt.
### Architectural Specifications
CSS 3D perspective transforms, DeviceOrientation API handling with permission modal, and glossy glare highlight overlay.
### Key Highlights
- **Production Blueprint**: Comprehensive end-to-end specifications optimized for modern AI coding tools.
- **Verified AI Compatibility**: Tested with cursor, v0.
- **Performance First**: Zero layout shift, responsive down to 375px viewports, and WCAG AA accessibility.
### Deliverables Included
- Master build instruction prompt (Markdown)
- System architecture and entity specifications
- Design tokens, responsive grids, and micro-interaction curves
- Validation rules, error boundaries, and security parameters