Nexu
- 480 skills
- 0 followers
- 4 weeks ago last updated
- ▌ Strands · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Threads · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Tilt 3d · nexu-io bundleAdd tactile depth to a hero card or cover image: it tilts in 3D toward the pointer with a soft glare. Keep the max angle small (~10°) and reserve it for one or a few hero cards, not a grid. Flat under prefers-reduced-motion and on touch.
- ▌ Count Up · nexu-io bundleAnimate a number counting up to its target as it scrolls into view, once. Use for stat/metric blocks to draw the eye to an impressive figure. Honors prefers-reduced-motion (final value shown instantly). Avoid for precise values the user must read while animating, or many counters at once.
- ▌ Dot Grid · nexu-io bundleAn interactive dot grid — pointer proximity glow, shove on fast moves, click shockwave, elastic return. A marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Toast Pop · nexu-io bundleA toast slides up from the bottom, holds, then fades away. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- ▌ Anim Flip · nexu-io bundleFlip — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Tada · nexu-io bundleTada — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Blur Text · nexu-io bundleWords resolve from a soft blur, one after another — a calm, premium headline entrance. One headline per view; not body copy. Under prefers-reduced-motion it appears instantly and sharp.
- ▌ Crosshair · nexu-io bundleA thin crosshair spans the viewport and tracks the pointer — a precise, techy custom cursor. One per page; suits tools/dashboards. Off on touch and under prefers-reduced-motion.
- ▌ Dark Veil · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Dot Field · nexu-io bundleA gradient dot lattice that bulges away from the pointer with a soft cursor glow. A marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Gooey Nav · nexu-io bundleA pill slides under the active nav item with a springy merge — a smooth segmented control. One per view. Under prefers-reduced-motion the pill jumps without easing.
- ▌ Grainient · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Lightfall · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Lightning · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Particles · nexu-io bundleA floating particle cloud — soft round sprites drifting in 3D with a slow scene wobble. A marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Side Rays · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Anim Flash · nexu-io bundleFlash — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Hinge · nexu-io bundleHinge — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Jello · nexu-io bundleJello — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Pulse · nexu-io bundlePulse — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Shake · nexu-io bundleShake — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Swing · nexu-io bundleSwing — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Fade In Up · nexu-io bundleRise + fade key elements in as the page loads, optionally staggered. Use for hero content and a small group of important elements. Honors prefers-reduced-motion. For long lists or off-screen content use scroll-reveal instead; never delay must-read content by more than a moment.
- ▌ Ferrofluid · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Light Rays · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Like Burst · nexu-io bundleAdd a celebratory particle burst to a like / favorite / reaction button. A delight micro-interaction that fires on user tap only (never on load), bursts on the "like" transition (not un-like), and ships a prefers-reduced-motion fallback. Use when a small, earned moment of positive feedback will feel good — and only one such moment per screen.
- ▌ Line Waves · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Pixel Card · nexu-io bundlePixel tiles light up in a wave across a card on hover — a subtle retro shimmer. A few cards, not a grid. Static under prefers-reduced-motion.
- ▌ Pixel Snow · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Shiny Text · nexu-io bundleA soft highlight sweeps across muted text — a quiet premium shimmer for one short label ("new", "pro", a CTA word). Keep the base text readable; one or two per view. Pure CSS; solid under reduced-motion.
- ▌ True Focus · nexu-io bundleWords sit softly blurred; one snaps into focus at a time — leads the eye across a short phrase. One per view; short phrases. Under prefers-reduced-motion all words stay sharp.
- ▌ Motion Anything · nexu-ioTurn one sentence of intent into tasteful, produced motion. Given a natural-language request like "make a good-looking animated landing page", "add a delightful like animation", or "make a silky release video", this skill classifies the intent, picks the most suitable recipes from the motion-anything library while honoring MOTION-SPEC.md (timing, easing, and the restraint budget), and produces the output. The universal entry point to motion-anything. Works on web pages, slides, app-showcase pages, and video.
- ▌ Anim Bounce · nexu-io bundleBounce — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Fadein · nexu-io bundleFade In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Rollin · nexu-io bundleRoll In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Shakex · nexu-io bundleShake X — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Shakey · nexu-io bundleShake Y — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Wobble · nexu-io bundleWobble — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Zoomin · nexu-io bundleZoom In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Blob Cursor · nexu-io bundleA soft gooey blob trails the cursor with a springy lag — a playful custom pointer for a hero section. One per page; can distract on content-heavy pages. Hidden on touch and under prefers-reduced-motion.
- ▌ Border Beam · nexu-io bundleGive one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.
- ▌ Click Spark · nexu-io bundleA quick burst of sparks flies from the point you click — a playful tap accent. Reserve for a delightful primary action; skip on serious/destructive ones. No sparks under prefers-reduced-motion.
- ▌ Glare Hover · nexu-io bundleA soft glare sweeps across a card following the cursor on hover — a premium, tactile sheen. Keep it subtle; a few hero cards, not a grid. Disabled on touch and under prefers-reduced-motion.
- ▌ Glass Icons · nexu-io bundleGlassmorphic icon buttons that lift and glow on hover — a tactile toolbar or social row. Use for a small row of actions. Flat under prefers-reduced-motion.
- ▌ Glitch Text · nexu-io bundleAn RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.
- ▌ Image Trail · nexu-io bundleThumbnails trail behind the cursor and fade — a gallery/portfolio hero flourish. One trail area per page; heavy on content pages. Off on touch and under prefers-reduced-motion.
- ▌ Iridescence · nexu-io bundleA living GPU shader background rendered in dependency-free WebGL — a distinctive, marketing-grade hero backdrop. One per view; put a scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Pixel Blast · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Plasma Wave · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Ripple Grid · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Soft Aurora · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Star Border · nexu-io bundleA soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.
- ▌ Web To Design Md · nexu-ioExtract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured `design.md` an AI can consume. Use to seed motion-anything's design system from an existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
- ▌ Bottom Sheet · nexu-io bundleA bottom sheet slides up over a dimmed backdrop, then dismisses. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- ▌ Button Press · nexu-io bundleA button that springs down on press and pops back — tactile tap feedback. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- ▌ Checkbox Pop · nexu-io bundleA checkbox that pops and draws its check on toggle. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- ▌ Anim Fadeout · nexu-io bundleFade Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Flipinx · nexu-io bundleFlip In X — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Flipiny · nexu-io bundleFlip In Y — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Rollout · nexu-io bundleRoll Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Zoomout · nexu-io bundleZoom Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Bounce Cards · nexu-io bundleA stack of cards springs and fans into place on view — a lively hero for a small set (3–5). One set per view. Shown flat/instant under prefers-reduced-motion.
- ▌ Fade Content · nexu-io bundleContent fades and rises gently as it enters the viewport — the calm default reveal. Reveal a few key blocks, not everything; keep travel small. Instant under prefers-reduced-motion.
- ▌ Falling Text · nexu-io bundleLetters drop into place one after another — a light, gravity-flavored headline entrance. One short playful line; not body copy. Instant under prefers-reduced-motion.
- ▌ Gradual Blur · nexu-io bundleA soft progressive blur fades content out toward an edge — a premium "more below" affordance for a scrolling list/section. Keep the readable content above the blur. Degrades gracefully where backdrop-filter is unsupported.
- ▌ Magnet Lines · nexu-io bundleA grid of little lines all point toward the cursor — a hypnotic interactive field for a hero/background. One field per view; it's attention-grabbing. Frozen under prefers-reduced-motion.
- ▌ Ripple Press · nexu-io bundleAcknowledge a tap/click with a ripple that blooms from the exact press point. Fast and low-opacity so it reads as feedback, not decoration. No ripple under prefers-reduced-motion (native :active covers it). Avoid on destructive actions and text links.
- ▌ Scroll Float · nexu-io bundleWords float up and settle as the line enters view — a lively per-word scroll reveal. One or two lines; keep travel modest. Visible instantly under prefers-reduced-motion.
- ▌ Shine Border · nexu-io bundleGive one hero card or CTA quiet premium life: a soft band of light travels around its border. One shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under prefers-reduced-motion. Do not put several on screen at once.
- ▌ Shuffle Text · nexu-io bundleLetters shuffle through random neighbors then settle into the word — a quick playful reveal for a short label. Final text is the real content; instant under prefers-reduced-motion.
- ▌ Stagger List · nexu-io bundleRise + fade list items in one after another on load, staggered by order. Use for short, above-the-fold lists, menus, or nav. Honors prefers-reduced-motion. For long or off-screen lists use scroll-reveal instead; never gate must-scan content on the animation.
- ▌ Tab Bar Slide · nexu-io bundleA bottom tab bar whose active pill slides between tabs. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- ▌ Anim Backinup · nexu-io bundleBack In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Bouncein · nexu-io bundleBounce In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Fadeinup · nexu-io bundleFade In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Rotatein · nexu-io bundleRotate In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Zoominup · nexu-io bundleZoom In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Lottie Fab · nexu-io bundleA floating action button that morphs open — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
- ▌ Lottie Tab · nexu-io bundleAn animated bottom-tab indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
- ▌ Circular Text · nexu-io bundleText curves around a circle and slowly rotates — a decorative badge/seal accent. Decorative only; keep the phrase short. Static ring under prefers-reduced-motion.
- ▌ Gradient Text · nexu-io bundleGive one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.
- ▌ Liquid Chrome · nexu-io bundleA distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Rotating Text · nexu-io bundleOne word swaps for the next in place — a compact way to cycle a few phrases in a headline. One rotator per view; short words. Under prefers-reduced-motion it swaps text with no travel.
- ▌ Scroll Reveal · nexu-io bundleReveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a long page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay above-the-fold content, and keep at most a few elements animating at once.
- ▌ Splash Cursor · nexu-io bundleA fluid-simulation cursor — pointer movement splats swirling, glowing dye (full multi-pass WebGL fluid sim). A marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.
- ▌ Target Cursor · nexu-io bundleAn animated target ring replaces the cursor and grows when it hovers buttons/links — a focused, techy pointer. One per page. Off on touch and under prefers-reduced-motion.
- ▌ Text Scramble · nexu-io bundleResolve one short headline from random glyphs — a techy decode reveal. One short line only; keep it fast. The resolved text is the real, accessible content; under prefers-reduced-motion it appears instantly with no scramble. Avoid on body copy and calm/luxury tones.
- ▌ Toggle Spring · nexu-io bundleA switch whose knob springs across on toggle — a tactile, satisfying on/off state change. Use for settings/form switches. Honors prefers-reduced-motion (quick linear slide). Trigger on user intent only; keep the spring subtle — never to convey loading/progress.
- ▌ Xyz Rotate · nexu-io bundleRotate In — a composable AnimXYZ entrance via the xyz="fade rotate-right-45" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
- ▌ Anim Backoutup · nexu-io bundleBack Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Bounceout · nexu-io bundleBounce Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Fadeoutup · nexu-io bundleFade Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Headshake · nexu-io bundleHead Shake — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Heartbeat · nexu-io bundleHeart Beat — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Rotateout · nexu-io bundleRotate Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Slideinup · nexu-io bundleSlide In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Anim Zoomoutup · nexu-io bundleZoom Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- ▌ Fx Confetti · nexu-io bundleConfetti fires across the frame — for wins and reveals. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.