1 / 3

在线演示

在新标签页打开真实演示页，亲手点一点、滑一滑看实际效果。

打开演示

免费精选v1.0.0

Tilt Card UI

官方精选

#tilt-card #3d #motion #animation #parallax

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.

适用平台Claude CodeCodexCursorCopilotGemini CLIWindsurfCline

试试这样说

Open the included parameter playground, tune tilt angle, glare intensity, and spring stiffness live, then drop the card component into your product showcase page.

你能得到

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.

适合场景

Product showcases, portfolio galleries, landing pages, and demos that need premium-feeling 3D card motion with zero dependencies.

不适合

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.

名称: Tilt Card UI
下载数: 0
分类: 设计
包含 skills: 1

下载与安装

v1.0.0更新于 2026/10/16 · 1.3 MB · 12 个文件

更新内容: Initial release: 3D tilt & parallax card system with luxury watch demo

登录后下载

登录用户免费下载。

1. 下载 ZIP

点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。

2. 解压到 agent 的 skills 目录

解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：

unzip tilt-card-ui-v1.0.0.zip -d ~/.claude/skills/tilt-card-ui/

各 Agent 的 skills 目录

Claude Code: ~/.claude/skills
Cursor: ~/.cursor/skills
Codex: ~/.codex/skills
GitHub Copilot: ~/.copilot/skills

3. 重启你的 agent

下次启动时 agent 会自动识别新 skill，直接问它能做什么。

喜欢这个免费 skill？Premium 解锁 43 个独家 skills。

一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。

看看 Premium →

评价

还没有评价，来做第一个打分的人吧。

登录后评价

相关技能

免费精选

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

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

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

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

设计