3D tilt and parallax card system for product showcases: tilt engine, depth layers, light glare, physical shadows, spring bounce-back, card flip, full-screen parallax, scroll fan-out, gyroscope support, and a parameter playground — vanilla JS, with prefers-reduced-motion fallback.
Open the included parameter playground, tune tilt angle, glare intensity, and spring stiffness live, then drop the card component into your product showcase page.
What you get
- A vanilla-JS 3D tilt and parallax card engine: tilt engine, depth layers, light glare, physical shadows, spring bounce-back, card flip, full-screen parallax, scroll fan-out, gyroscope support, prefers-reduced-motion fallback, a parameter playground, and a luxury watch demo.
Good fit
- Product showcases, portfolio galleries, landing pages, and demos that need premium-feeling 3D card motion with zero dependencies.
Not for
- Heavy WebGL scenes or full 3D game engines — this skill is built for lightweight CSS/JS tilt and parallax card effects, not complex 3D worlds.
- Name
- Tilt Card UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Initial release: 3D tilt & parallax card system with luxury watch demo
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip tilt-card-ui-v1.0.0.zip -d ~/.claude/skills/tilt-card-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 43 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Micro Interaction UI
Micro Interaction UI
A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.
Claude Code · Codex · Cursor · Copilot +3
Hero Sequence UI
Hero Sequence UI
Cinematic animated hero sequences: masked line reveals, character stagger, kinetic typography on scroll, load choreography, and ambient background motion for luxury-grade landing pages.
Claude Code · Codex · Cursor · Copilot +3
Page Transition UI
Page Transition UI
Design page-transition systems for multi-view websites: orchestrated crossfades, directional slides, shared-element morphs (View Transitions API + FLIP fallback), curtain wipes, blur dissolves, bouncy brand moments, and loading orchestration — every recipe with exact trigger, duration/easing, and copy-paste vanilla code.
Claude Code · Codex · Cursor · Copilot +3
Emil Kowalski Design Skills
Emil Kowalski Design Skills
Give your coding agent taste. 11 design-engineering skills from Emil Kowalski (ex-Vercel, ex-Linear) — animation decisions, motion review, Apple design principles, and UI polish. MIT-licensed, curated with attribution.
Claude Code · Codex · Cursor · Copilot +3