nexu-io/motion-anything - 5ページ

galaxy

A 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.

原文の言語: 英語

glare-hover

A 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

Glassmorphic 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

An RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.

原文の言語: 英語

gooey-nav

A 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.

原文の言語: 英語

gradient-blinds

A 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.

原文の言語: 英語

gradient-text

Give 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.

原文の言語: 英語

gradual-blur

A 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.

原文の言語: 英語

grainient

A 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.

原文の言語: 英語

image-trail

Thumbnails 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

A 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.

原文の言語: 英語

kinetic-headline

Stagger a headline's words (or letters) in on load, one after another. Use for a single hero headline or a title card in a launch video. Honors prefers-reduced-motion. One per screen; never use on body copy or must-read content.

原文の言語: 英語

light-rays

A 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

A 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

A 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

Add 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,…

原文の言語: 英語

line-waves

A 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.

原文の言語: 英語

liquid-chrome

A 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.

原文の言語: 英語

loading-shimmer

Skeleton placeholders with a soft sweeping shimmer while content loads. Use to fill space for cards/lists/profiles that are still loading and make the wait feel shorter. Honors prefers-reduced-motion (static skeleton). Only show while real content is loading…

原文の言語: 英語

magnet-lines

A 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.

原文の言語: 英語

magnetic-button

Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion. Do not use it on dense UIs full of…

原文の言語: 英語

noise

A film-grain noise overlay — subtle animated texture over any background. A marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.

原文の言語: 英語

orb

A 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

A 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.

原文の言語: 英語

pixel-blast

A 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

Pixel 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

A 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-transition

A card reveals a second face through a burst of pixel tiles on hover — a retro reveal. A few cards, not a grid. Under prefers-reduced-motion the back face just appears.

原文の言語: 英語

plasma

A 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

A 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.

原文の言語: 英語

prism

A 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.

原文の言語: 英語

prismatic-burst

A 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.

原文の言語: 英語

radar

A 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

A 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-press

Acknowledge 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.

原文の言語: 英語

rotating-text

One 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-float

Words 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.

原文の言語: 英語

scroll-reveal

Reveal 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.

原文の言語: 英語

shimmer-button

Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on hover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid button) under prefers-reduced-motion. Do not use on…

原文の言語: 英語

shine-border

Give 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.

原文の言語: 英語