# Tools

> Every listed resource, editors’ picks first. The filters below can be combined.

- Search: append `?q=<keywords>` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README.
- Filter by type: append `?type=<cli|skill|plugin|mcp>` to the URL.
- Filter by profession: append `?profession=<profession id>` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions
- Filter by tag: append `?tag=<tag>` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags

Tagged `react`, `animation`: 12 items.

- [Cobe.js](https://hebbmind.com/es/skill/cobejs.md): [Skill] Adds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections.
- [GSAP](https://hebbmind.com/es/skill/gsap.md): [Skill] Helps the agent add or debug web animations with GSAP: tweens, timelines and position parameters, easing, stagger and ScrollTrigger pin and scrub, plus fixes for jank, cleanup with gsap.context() in React and refreshing after images load.
- [Product Film](https://hebbmind.com/es/skill/product-film.md): [Skill] Makes a product film (landing-page loop, launch video, promo, demo reel) in code with Remotion, reusing the product's own design system, components and voice. It interviews the user first, then writes the story, syncs scenes to music beats, reviews stills in loops and verifies the final render.
- [WebGL Components](https://hebbmind.com/es/skill/webgl-components.md): [Skill] Guides building small always-on WebGL visuals (avatars, ambient orbs, glass and iridescent surfaces) inside product UI: one shared context, a single capped frame loop, cheap fragment shaders, context-loss handling, a mandatory non-WebGL fallback, and React SSR and Server Components pitfalls.
- [Page Transition Animation](https://hebbmind.com/es/skill/page-transition-animation.md): [Skill] Implements page and route transitions in the Next.js App Router and fixes Framer Motion exit animations that never fire on navigation, using template.tsx with a pathname-keyed AnimatePresence and FrozenRouter, or the View Transitions API via next-view-transitions.
- [Lottie Animation](https://hebbmind.com/es/skill/lottie-animation.md): [Skill] Integrates Lottie and dotLottie animations from After Effects into web, iOS, Android and React Native: playback and segment control, scroll- or hover-driven interactivity, runtime theming and recoloring, plus an After Effects export checklist.
- [Micro Interaction](https://hebbmind.com/es/skill/micro-interaction.md): [Skill] Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support.
- [Mastering AnimatePresence](https://hebbmind.com/es/skill/mastering-animate-presence.md): [Skill] Audits Motion (Framer Motion) code against AnimatePresence rules: wrapping conditional exits, exit props and keys, the useIsPresent and usePresence hooks, choosing a mode, and coordinating nested exits. Reports findings as file:line. For React projects.
- [Morphing Icons](https://hebbmind.com/es/skill/morphing-icons.md): [Skill] Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion.
- [To Spring or Not to Spring](https://hebbmind.com/es/skill/to-spring-or-not-to-spring.md): [Skill] Audits animation code for the right timing function: springs for gestures and interruptible motion, easing for system-driven state changes, linear for progress, and no animation for high-frequency interactions. Also checks spring parameters and durations. Reports file:line findings.
- [Product Launch Video](https://hebbmind.com/es/skill/product-launch-video.md): [Skill] Builds product launch, promo and feature announcement videos with Remotion (React): asks nine questions about product, audience, duration, voiceover and channel, proposes 2-3 visual directions, writes a storyboard.json, then codes scenes and optional voiceover.
- [Animate UI](https://hebbmind.com/es/skill/animate-ui.md): [Skill] Prototyper UI's animation conventions for writing, reviewing or debugging component motion: copy-paste class strings for overlays, dialogs and sheets, press-feedback scales, state transitions, easing tokens and prefers-reduced-motion handling.
