zarazhangrui

Animation Patterns Reference

Development community intermediate

SOURCE https://github.com/zarazhangrui/frontend-slides

Description

Use this reference when generating presentations. Match animations to the intended feeling.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for zarazhangrui/frontend-slides, shared by 3 entries in this directory. It describes the repository, not this entry specifically.

Animation Patterns Reference

Use this reference when generating presentations. Match animations to the intended feeling.

Effect-to-Feeling Guide

Feeling	Animations	Visual Cues
Dramatic / Cinematic	Slow fade-ins (1-1.5s), large scale transitions (0.9 to 1), parallax scrolling	Dark backgrounds, spotlight effects, full-bleed images
Techy / Futuristic	Neon glow (box-shadow), glitch/scramble text, grid reveals	Particle systems (canvas), grid patterns, monospace accents, cyan/magenta/electric blue
Playful / Friendly	Bouncy easing (spring physics), floating/bobbing	Rounded corners, pastel/bright colors, hand-drawn elements
Professional / Corporate	Subtle fast animations (200-300ms), clean slides	Navy/slate/charcoal, precise spacing, data visualization focus
Calm / Minimal	Very slow subtle motion, gentle fades	High whitespace, muted palette, serif typography, generous padding
Editorial / Magazine	Staggered text reveals, image-text interplay	Strong type hierarchy, pull quotes, grid-breaking layouts, serif headlines + sans body

Entrance Animations

/* Fade + Slide Up (most versatile) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
}
.visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Scale In */
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* Slide from Left */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* Blur In */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
}

Background Effects

/* Gradient Mesh — layered radial gradients for depth */
.gradient-bg {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
        var(--bg-primary);
}

/* Noise Texture — inline SVG for grain */
.noise-bg {
    background-image: url("data:image/svg+xml,..."); /* Inline SVG noise */
}

/* Grid Pattern — subtle structural lines */
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

Interactive Effects

/* 3D Tilt on Hover — adds depth to cards/panels */
class TiltEffect {
    constructor(element) {
        this.element = element;
        this.element.style.transformStyle = 'preserve-3d';
        this.element.style.perspective = '1000px';

        this.element.addEventListener('mousemove', (e) => {
            const rect = this.el