slidev-click-animations
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
- Installs
- 211
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-click-animations- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads slidev-click-animations automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Click Animations in Slidev
This skill covers all click-based animations in Slidev, including v-click, v-after, v-clicks, v-switch, and motion directives for creating dynamic, engaging presentations.
When to Use This Skill
- Revealing content step by step
- Building up complex diagrams
- Creating suspense or emphasis
- Guiding audience attention
- Interactive presentation flow
v-click Basics
Component Syntax
<v-click>
This appears on the first click
</v-click>
Directive Syntax
<div v-click>
This also appears on click
</div>
Multiple v-clicks
<v-click>First</v-click>
<v-click>Second</v-click>
<v-click>Third</v-click>
Each appears on successive clicks.
Click Positioning
Explicit Position
<div v-click="1">Appears first</div>
<div v-click="3">Appears third</div>
<div v-click="2">Appears second</div>
Relative Position
<div v-click>First (click 1)</div>
<div v-click="'+1'">Second (click 2)</div>
<div v-click="'+2'">Fourth (click 4)</div>
Same Click (v-after)
<v-click>Main content</v-click>
<v-after>Appears with main content</v-after>
Or using relative position:
<v-click>Main content</v-click>
<v-click="'+0'">Also appears with main</v-click>
v-clicks for Lists
Basic List Animation
<v-clicks>
- First item
- Second item
- Third item
</v-clicks>
Nested Lists
<v-clicks depth="2">
- Parent 1
- Child 1.1
- Child 1.2
- Parent 2
- Child 2.1
</v-clicks>
Every N Items
<v-clicks every="2">
- Items 1-2 together
- (same click)
- Items 3-4 together
- (same click)
</v-clicks>
Hide on Click
v-click.hide
<div v-click.hide>This disappears on click</div>
v-click with hide
<v-click hide>
This content will be hidden after the click
</v-click>
Range-based Hiding
<div v-click.hide="[2, 4]">
Visible until click 2, hidden on clicks 2-3, visible again at click 4
</div>
v-switch
Switch between different content based on clicks:
<v-switch>
<template #1>Content at click 1</template>
<template #2>Content at click 2</template>
<template #3>Content at click 3</template>
<template #4-6>Content at clicks 4, 5, and 6</template>
<template #default>Default content (before click 1)</template>
</v-switch>
Practical Example
<v-switch>
<template #0>
<h2>Step 1: Initialize</h2>
<p>Set up the project structure</p>
</template>
<template #1>
<h2>Step 2: Configure</h2>
<p>Add configuration files</p>
</template>
<template #2>
<h2>Step 3: Build</h2>
<p>Run the build command</p>
</template>
</v-switch>
Motion Animations
Basic Motion
<div
v-motion
:initial="{ opacity: 0, y: 100 }"
:enter="{ opacity: 1, y: 0 }"
>
Slides up and fades in
</div>
Motion with Clicks
<div
v-motion
:initial="{ x: -100, opacity: 0 }"
:enter="{ x: 0, opacity: 1 }"
:click-1="{ scale: 1.2 }"
:click-2="{ x: 100 }"
:leave="{ opacity: 0 }"
>
Complex motion sequence
</div>
Motion Variants
| Variant | When Applied |
|---|---|
initial | Initial state |
enter | When slide is entered |
click-N | At click N |
click-N-M | During clicks N to M |
leave | When leaving slide |
Motion Properties
<div
v-motion
:initial="{
opacity: 0,
scale: 0.5,
x: -200,
y: 100,
rotate: -45
}"
:enter="{
opacity: 1,
scale: 1,
x: 0,
y: 0,
rotate: 0,
transition: {
duration: 500,
ease: 'easeOut'
}
}"
>
Animated element
</div>
Click Counter Configuration
Setting Total Clicks
---
clicks: 5
---
Forces the slide to have exactly 5 clicks.
Auto Clicks
---
clicks: auto
---
Automatically determines click count (default).
Styling Click States
CSS Classes
When an element has v-click:
.slidev-vclick-target- Always applied.slidev-vclick-hidden- When hidden.slidev-vclick-current- Currently active click.slidev-vclick-prior- Already revealed
Custom Transitions
/* styles/index.css */
.slidev-vclick-target {
transition: all 0.5s ease;
}
.slidev-vclick-hidden {
opacity: 0;
transform: translateY(20px);
}
Scale Animation
.slidev-vclick-target {
transition: all 0.3s ease;
}
.slidev-vclick-hidden {
transform: scale(0);
opacity: 0;
}
Blur Effect
.slidev-vclick-hidden {
filter: blur(10px);
opacity: 0;
}
Practical Patterns
Building a List
# Key Points
<v-clicks>
1. **Performance** - Optimized for speed
2. **Security** - Built-in protection
3. **Scalability** - Handles growth
4. **Maintainability** - Clean architecture
</v-clicks>
Progressive Diagram
# Architecture
<div class="grid grid-cols-3 gap-4">
<div v-click="1" class="box">Frontend</div>
<div v-click="2" class="box">API</div>
<div v-click="3" class="box">Database</div>
</div>
<Arrow v-click="4" x1="100" y1="100" x2="200" y2="100" />
<Arrow v-click="5" x1="300" y1="100" x2="400" y2="100" />
Before/After Reveal
# The Solution
<div v-click.hide="2">
<h2>Before</h2>
<pre>Old code here</pre>
</div>
<div v-click="2">
<h2>After</h2>
<pre>New improved code</pre>
</div>
Animated Highlight
# Important Concept
<p v-click="1">
This is a paragraph with
<span
v-motion
:initial="{ background: 'transparent' }"
:click-2="{ background: '#fef08a' }"
class="px-1"
>
highlighted text
</span>
that appears.
</p>
Step-by-Step Code
```typescript {1|2|3|all}
const name = 'Slidev'
const version = '0.50'
console.log(`${name} v${version}`)
```
Best Practices
1. Don't Overuse
❌ Too many clicks
<v-click>Word</v-click>
<v-click>by</v-click>
<v-click>word</v-click>
<v-click>is</v-click>
<v-click>annoying</v-click>
✓ Meaningful groups
<v-click>First complete thought</v-click>
<v-click>Second complete thought</v-click>
2. Group Related Content
<v-click>
<h3>Feature A</h3>
<p>Description of feature A</p>
</v-click>
<v-click>
<h3>Feature B</h3>
<p>Description of feature B</p>
</v-click>
3. Consider Timing
<!-- Good for demos - immediate -->
<div v-click>Quick reveal</div>
<!-- Good for emphasis - animated -->
<div
v-motion
:initial="{ opacity: 0 }"
:enter="{ opacity: 1, transition: { duration: 800 } }"
>
Dramatic reveal
</div>
4. Use for Navigation Cues
<v-click at="1">
👉 First, we'll look at setup
</v-click>
<v-click at="2">
👉 Then, we'll implement features
</v-click>
<v-click at="3">
👉 Finally, we'll deploy
</v-click>
Debugging Tips
- Check click count: Look at the click counter in presenter mode
- Verify positions: Use explicit positions when order matters
- Test all clicks: Click through every animation before presenting
- Check CSS conflicts: Custom styles might interfere
Output Format
When creating click animations:
# [Slide Title]
[Static introductory content if any]
<v-clicks>
- [Point revealed at click 1]
- [Point revealed at click 2]
- [Point revealed at click 3]
</v-clicks>
<v-click at="4">
[Conclusion that appears last]
</v-click>
---
CLICK SEQUENCE:
1. [What appears/happens]
2. [What appears/happens]
3. [What appears/happens]
4. [What appears/happens]
TOTAL CLICKS: [N]
FAQ
What does the slidev-click-animations skill do?
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
How do I install slidev-click-animations?
Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-click-animations in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-click-animations/ (personal) or .claude/skills/slidev-click-animations/ (project).
Which AI agents can use slidev-click-animations?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is slidev-click-animations safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains slidev-click-animations?
It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 211 recorded installs.
More from yoanbernabeu/slidev-skills
slidev-styling
yoanbernabeu/slidev-skills
Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.
slidev-quick-start
yoanbernabeu/slidev-skills
Get started with Slidev presentations in minutes. Use this skill to create your first presentation or set up a new Slidev project.
slidev-themes
yoanbernabeu/slidev-skills
Use and customize Slidev themes. Use this skill to apply themes, configure theme options, and create custom themes.
slidev-syntax-guide
yoanbernabeu/slidev-skills
Master Slidev's extended Markdown syntax. Use this skill to write slides with advanced formatting, frontmatter, and special features.
slidev-drawings
yoanbernabeu/slidev-skills
Open the skill to read its SKILL.md instructions.
slidev-project-structure
yoanbernabeu/slidev-skills
Understand Slidev project structure and configuration. Use this skill to configure themes, addons, and customize your presentation setup.
Popular other skills
hyperframes-cli
heygen-com/hyperframes
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
triage
mattpocock/skills
Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.
ask-matt
mattpocock/skills
Ask which skill or flow fits your situation. A router over the skills in this repo.
to-questionnaire
mattpocock/skills
Turn a decision you can't fully answer into a questionnaire for someone else to fill in.
loop-me
mattpocock/skills
Grill me about specs for the workflows I want to build, within this workspace.