Unclecheng-li/AI_Animation

This project organizes AI prompts for generating [cool HTML animated web pages], covering animation effects, 3D visualization, PPT-style presentations, UI enhancement, and more.

About the project

AI Animation Skills is a collection of agent instructions and templates for generating single-file HTML animations, including presentations, diagrams, protocol visualizations, phone interfaces, and video-style scenes. People use the skills with AI coding agents to create animated web pages from descriptions or templates. The catalogue entries are the collection's individual generation workflows.

1.6kStars on the repository
95Mods indexed here, across every type
2d agoLast push, which is what freshness is scored on
MITLicence, which decides whether bodies are shown

hero-loader-morph

49

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A zinc loader morphs square↔circle with rotation. Function: loading / wait state (textless).

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-lockup-sting

50

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A centered UI2V wordmark scales into place, a gradient rule draws underneath, and a HyperFrames Registry tagline fades up. Short brand sting for opens and outros.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-map-route

51

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A light mint map card draws a delivery route from Origin through Hub to Arrive. Function: progress along a path, useful for logistics and onboarding journeys.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-metro-tick

52

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A metro track draws across the frame, station ticks appear, and an orange train marker travels from Init to Ship. It is a timing metaphor for shipping workflows.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-neon-pulse

53

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A 4.5 second HyperFrames hero built around expanding neon rings and a luminous core. Designed for UI2V homepage carousels that need a live, signal-like energy without narration.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-neon-sign

54

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A night storefront frame flickers a magenta neon OPEN until the tubes lock on. Function: status / availability ignition.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-orb-pulse

55

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Textless cyan orb blooms, rings expand, then the core pulses. Function: energy / focus / brand void.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-orbit-nodes

56

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Six nodes orbit a bright hub with spokes redrawn each frame. Function: system / cluster / sync (textless).

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-otp-fill

57

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Six one-time-passcode cells fill digit by digit, then all confirm. Function: 2FA / verify / login.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-password-meter

58

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A dark auth card grows a masked passphrase while four strength segments light from weak to strong. Function: security / signup strength.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-pie-slice

59

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A dark donut chart grows category wedges for Product, Docs, and Community while a center percent updates. Function: share-of-mix data reveal.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-pixel-rain

60

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Columns of square pixels fall on the right half of the frame while the title holds the left. It is a matrix-inspired atmosphere piece without noisy particles.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-price-tag

61

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A hanging orange price tag drops on a string and swings to rest on a discounted figure. Function: commerce / offer reveal.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-prism-fold

62

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Three translucent color planes fold into depth beside the title. The motion is about layered cards, not particles.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-progress-ring

63

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A slate SaaS card with a cyan circular meter that fills to 100%. Function: onboarding / sync / install completion.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-radar-sweep

64

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A CRT-green radar scope rotates its sweep arm while fixed contact blips light up. Function: detection / monitoring — observability energy, not marketing gradients.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-receipt-print

65

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A thermal receipt feeds down from a dark checkout slot. Function: transaction / publish confirmation print.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-ribbon-sweep

66

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Three amber SVG ribbons draw across black in staggered strokes. Function: energy sweep / brand stroke.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-scope-trace

67

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

An oscilloscope panel draws a cyan signal from left to right behind a scanning beam. Function: lab signal / telemetry draw-on.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-search-focus

68

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A large search field focuses, types progress, and opens a result list. Function: discover / query / find.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-signal-wave

69

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

An equalizer field of twenty-four bars rises and settles under a bold title. Use it when the product story needs audible energy without actual audio.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-slider-settle

70

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A render-quality slider rises past the target, corrects, then settles on 75%. Function: range control / preference set.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-soft-mesh

71

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

Overlapping pastel radial fields form a soft mesh on a warm paper ground. Function: ambient brand atmosphere, opposite of hard UI chrome.

not rated 1.6k +54 2d ago A 0 tokens original MIT

hero-sparkline-rise

72

Unclecheng-li/AI_Animation

Skill Claude CodeCodex

A dark analytics card draws a green sparkline while the delta counts to +38%. Function: KPI / growth / analytics hero.

not rated 1.6k +54 2d ago A 0 tokens original MIT

At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: