Run any Skill in Manus with one click

animate

Stars0

Forks0

UpdatedMarch 20, 2026 at 15:09

Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Dragoon0x

Dragoon0x/optik

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	animate
description	Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

/animate — Purposeful Motion

Add motion that serves a purpose:

Page load: Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms.

Hover states: Scale (1.02-1.05), subtle shadow lift, color transitions. Duration: 200-300ms. Easing: var(--ease-spring) for playful, var(--ease-out) for refined.

Scroll reveals: Elements fade in and translate 20-30px as they enter viewport. Use IntersectionObserver. Stagger siblings.

Transitions: All interactive state changes (hover, focus, active) should have transition declarations. Minimum: color, background-color, border-color, box-shadow, transform.

Always include prefers-reduced-motion: reduce media query that disables animations.

More from this repository

same repository

a11y-audit

Dragoon0x/optik

Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.

2026-03-200

a11y-fix

Dragoon0x/optik

Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.

2026-03-200

align

Dragoon0x/optik

Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.

2026-03-200

aria

Dragoon0x/optik

Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.

2026-03-200

audit

Dragoon0x/optik

Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.

2026-03-200

benchmark

Dragoon0x/optik

Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.

2026-03-200

name	animate
description	Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

/animate — Purposeful Motion

Add motion that serves a purpose:

Page load: Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms.

Hover states: Scale (1.02-1.05), subtle shadow lift, color transitions. Duration: 200-300ms. Easing: var(--ease-spring) for playful, var(--ease-out) for refined.

Scroll reveals: Elements fade in and translate 20-30px as they enter viewport. Use IntersectionObserver. Stagger siblings.

Transitions: All interactive state changes (hover, focus, active) should have transition declarations. Minimum: color, background-color, border-color, box-shadow, transform.

Always include prefers-reduced-motion: reduce media query that disables animations.