Communitygithub.com

devmartinese/awwwards-animations

Compétence React professionnelle pour créer des animations de niveau Awwwards/FWA avec GSAP, Motion, Anime.js et Lenis.

Qu'est-ce que awwwards-animations ?

Cette compétence est conçue pour les développeurs React qui souhaitent produire des animations de haute qualité, dignes des prix Awwwards ou FWA. Elle exploite les bibliothèques GSAP (via useGSAP), Motion (anciennement Framer Motion), Anime.js et Lenis pour offrir des expériences de défilement premium, des curseurs personnalisés, des transitions de page, des animations de texte, des effets de parallaxe, des micro-interactions, et bien plus. L'accent est mis sur une approche centrée sur React, avec un nettoyage approprié et l'utilisation de hooks pour garantir des performances à 60 images par seconde. La compétence se déclenche sur des demandes spécifiques comme le défilement fluide, ScrollTrigger, les effets magnétiques, les animations de révélation, le défilement horizontal, les sections épinglées, les effets de décalage, useScroll, useTransform, l'intégration avec Three.js/WebGL, et une large gamme de concepts d'art algorithmique, mathématique, génératif, de géométrie sacrée, de puzzles géométriques, de typographie cinétique, d'effets de glitch, de design brutaliste ou de néo-brutalisme.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/devmartinese/awwwards-animations-skill/tree/main/skills/awwwards-animations
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait awwwards-animations ?

Compétence React professionnelle pour créer des animations de niveau Awwwards/FWA avec GSAP (useGSAP), Motion (Framer Motion), Anime.js et Lenis. Utilisez-la pour construire des expériences de défilement premium, des curseurs personnalisés, des transitions de page, des animations de texte, des effets de parallaxe, des micro-interactions, ou toute animation nécessitant 60 images par seconde et une qualité primée. Se déclenche sur les demandes de défilement fluide, ScrollTrigger, effets magnétiques, animations de révélation, défilement horizontal, sections épinglées, effets de décalage, useScroll, useTransform, intégration avec Three.js/WebGL, art algorithmique, art mathématique, art génératif, fractales, systèmes L, champs de flux, attracteurs étranges, géométrie sacrée, puzzles géométriques, dissections de Dudeney, tangram, tessellations, carreaux de Penrose, typographie cinétique, effets de glitch, explosion de texte, texte morphing, texte circulaire, design brutaliste, animation minimaliste, néo-brutalisme, ou mélange de philosophie de design. Approche React-first avec nettoyage approprié et hooks.

Skills associés

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community