# Tools > Every listed resource, editors’ picks first. The filters below can be combined. - Search: append `?q=` 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=` to the URL. - Filter by profession: append `?profession=` 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=` 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 Resources for Frontend or DevOps / SRE or ML / AI, Tagged `css`, `animation`: 13 items. > - Frontend: Web and mobile-web interfaces: building, debugging and performance tuning. > - DevOps / SRE: Deployment, monitoring, cloud resources and reliability. > - ML / AI: Model training, evaluation and LLM application development. - [Animation On Scroll](https://hebbmind.com/skill/animation-on-scroll.md): [Skill] Adds scroll-reveal animations that fire when elements enter the viewport, using an IntersectionObserver snippet plus keyframes and a Tailwind arbitrary animation class; tune threshold, rootMargin, duration, delay and play-once behavior. - [Marquee Loop](https://hebbmind.com/skill/marquee-loop.md): [Skill] Builds seamless infinite marquees for logos, testimonials, screenshots or tags by duplicating the item sequence and translating the track from 0 to -50%, with stable widths, faded edges, optional hover pause and reduced-motion handling. - [Refine Live](https://hebbmind.com/skill/refine-live.md): [Skill] In-chat fallback for the transitions.dev Timeline Inspector's Refine button: the agent long-polls a local relay and answers jobs with motion-token tweaks or a full transition recipe swap, and applies accepted changes. Idle polling costs credits, so the persistent CLI mode is preferred. - [Transitions Polish](https://hebbmind.com/skill/transitions-polish.md): [Skill] Polishes existing motion against the transitions.dev token scale for duration, distance, scale, blur and easing, matching each value by what the motion does rather than the nearest number, with rules for open/close asymmetry, hover in and out, stagger and intent delays. - [60fps Animation](https://hebbmind.com/skill/60fps-animation.md): [Skill] Fixes janky web animation by moving width, height, position and box-shadow animations onto compositor-only transform and opacity, using pseudo-element opacity for shadows and the FLIP technique for layout changes and height: auto, to reach smooth 60/120fps motion. - [Accessible Animation](https://hebbmind.com/skill/accessible-animation.md): [Skill] Applies tiered prefers-reduced-motion handling instead of disabling everything: removes vestibular triggers like parallax and scroll hijacking, softens large movement into short fades, and keeps essential motion. Covers CSS and JS gating for GSAP, Framer Motion and Lenis, per WCAG 2.3.3. - [Glassmorphism](https://hebbmind.com/skill/glassmorphism.md): [Skill] Builds frosted and liquid-glass UI: backdrop-filter blur, translucent fills, bright edge highlights and layered shadows, SVG displacement for refraction, hover, scroll and entrance motion, plus accessible reduced-transparency fallbacks. - [Micro Interaction](https://hebbmind.com/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. - [SVG Animation](https://hebbmind.com/skill/svg-animation.md): [Skill] Animates SVG with stroke draw-on effects, path morphing via GSAP MorphSVG or Flubber, motion along a path, animated icon state changes, and gradient or filter animation, choosing between CSS, SMIL and GSAP per task. - [Transitions.dev](https://hebbmind.com/skill/transitions-dev.md): [Skill] Provides twelve drop-in CSS transitions, including card resize, number pop-in, badges, dropdowns, modals, panel reveals, page slides, icon swaps, success checks and error shakes, configured through shared CSS custom properties with no framework dependency and reduced-motion guards. - [12 Principles of Animation](https://hebbmind.com/skill/12-principles-of-animation.md): [Skill] Audits animation code against Disney's 12 principles adapted for the web, checking timing, easing, physics and staging rules such as user-initiated motion under 300ms and ease-out entrances, and reports findings as file:line. - [Pseudo Elements](https://hebbmind.com/skill/pseudo-elements.md): [Skill] Audits CSS and JavaScript for pseudo-element and View Transitions API practices: content, positioning and z-index of ::before and ::after, replacing extra DOM nodes, expanding hit targets, naming and cleaning up view-transition-name, and ::backdrop styling. Reports findings as file:line. - [Compact Landing](https://hebbmind.com/skill/compact-landing.md): [Skill] Builds compact, polished landing pages for dev tools, package demos and micro-SaaS. Picks a design fingerprint (composition, palette, type, radius, surfaces, motion) so each run looks different, features a product-native demo, and keeps zero layout shift, focus states and reduced motion.