# Frontendmaxxing INDEX — snippet lookup > **First time here? Read [`AGENTS.md`](AGENTS.md) first** — it explains the folder's purpose, conventions, and how to add new snippets. This file is the tagged inventory; AGENTS.md is the operating manual. > > **How to use this file:** `grep` for keywords describing what you want. > Each entry is two lines: `**name** path — tags | globals | deps` then a one-liner. > Synonyms are baked into the tag strings — search for the *vibe* not the filename. > When a match looks right, **read the actual file** for the full API and variants. > > Also see: [`gradients.skill.md`](gradients.skill.md) for the gradient-specific decision tree (32+ files of gradient territory). ## Quick lookup by intent | Want… | Look at | | --- | --- | | Animated button (one of 30+ styles) | `blocks/buttons.css/.js`, `blocks/buttons-pack.css`, `blocks/shimmer-button.css`, `blocks/rainbow-button.css`, `blocks/pulsating-button.css` | | Loading spinner / dots / bars | `blocks/loaders.css/.js`, `blocks/loaders-pack.css` (18 variants) | | Confetti / celebration burst | `feedback/confetti.js` | | Hero section with effects | `components/heroes.css/.js`, `effects/lamp.css`, `effects/spotlight-v2.css`, `backgrounds/aurora.css`, `backgrounds/grid-bg-spotlight.css` | | Animated background | `backgrounds/animated-bg.css/.js`, `backgrounds/aurora.css`, `effects/retro-grid.css`, `effects/flickering-grid.css/.js`, `effects/animated-grid-pattern.css/.js`, `effects/meteors.css/.js`, `effects/wavy-background.css/.js`, `shaders/gradient-mesh.glsl.js` | | Cursor follows / glow / blob / magnetic | `effects/cursor-effects.js`, `effects/cursor-glow.css/.js`, `effects/blob-cursor.css/.js`, `interactions/cursor-magnetic.js` | | 3D scene with three.js | `3d/scene-runner.js` + any `3d/*.js` | | Custom shader on a canvas | `shaders/runner.js` + a `shaders/*.glsl.js` | | Marquee / ticker / infinite scroll text | `components/marquee.css/.js`, `components/marquee-3d.css` | | Bento grid layout | `components/bento-grid.css` | | Macy/Pinterest grid | `layout/masonry.css` | | Sliding pill tabs | `components/animated-tabs.css/.js` | | FAQ accordion | `components/faq.css/.js` | | Modal / dialog | `components/modals.css/.js` | | Toast notifications | `blocks/toasts.css/.js` | | Tooltip | `blocks/tooltips.css/.js` | | Pricing table + monthly/yearly toggle | `components/pricing.css`, `components/pricing-toggle.css/.js` | | Stats counters | `components/stats.css/.js`, `data-viz/count-up.js` | | Progress bar / ring | `blocks/loaders.css` (linear/topBar), `data-viz/progress-ring.css/.js` | | Sparkline / mini chart | `data-viz/sparkline.js` | | Audio bars / equalizer | `data-viz/bar-pulse.css` | | Floating action button → row of actions | `components/family-button.css/.js` | | iPhone-style "Dynamic Island" pill | `components/dynamic-island.css/.js` | | macOS-style dock with magnification | `components/dock.css/.js` | | File tree explorer | `components/file-tree.css/.js` | | Fake terminal that types | `components/terminal.css/.js` | | Orbiting icons around a center | `components/orbiting-circles.css` | | Vertical scroll-progress timeline | `components/timeline-vertical-progress.css/.js`, `components/timeline.css` | | Animated list (notifications stacking) | `components/animated-list.css/.js`, `components/notification-stack.css` | | Card 3D tilt | `components/cards.js` (tilt), `components/cards-3d.css/.js` (parallax layers) | | Hero parallax product grid | `components/hero-parallax.css/.js` | | Feature grid with cursor spotlight | `components/feature-grid-hover.css/.js` | | Glassmorphism / frosted | `effects/glassmorphism.css` | | Gradient text / aurora text | `effects/aurora-text.css`, `typography/text-effects.css` | | Text reveal / type-in / scramble | `effects/text-reveal.js`, `effects/text-generate.js`, `effects/text-wave.js`, `scroll/scroll-text-reveal.css/.js`, `effects/text-ripple.js` | | Image reveal mask (clip-path entrance) | `effects/image-reveal-mask.css/.js` | | Image distortion on hover | `effects/image-distortion-hover.css/.js` | | Before/after image compare slider | `media/image-compare.css/.js` | | Video autoplay on hover | `media/video-hover-preview.css/.js` | | Spotlight reveal mouse-tracking | `effects/spotlight-reveal.css/.js`, `effects/spotlight-v2.css` | | Border beam / rotating gradient border | `effects/border-beam.css`, `effects/shine-border.css`, `borders/animated-borders.css` | | Glitch / retro effect | `effects/glitch.css`, `effects/retro-grid.css` | | Noise / grain texture | `effects/noise-grain.css` | | Morph (geometry / clip-path) | `effects/morphing.css`, `3d/cube-morph.js` | | Particles (canvas) | `effects/particles.js`, `3d/particles-galaxy.js` | | Sparkles / twinkle | `effects/sparkles.css/.js` | | Meteors falling | `effects/meteors.css/.js` | | Ripple effect (button click / ambient) | `blocks/buttons.js` (ripple), `effects/ripple.css` (ambient rings) | | Scroll-pinned section | `scroll/scroll-pin.js`, `scroll/horizontal-pin.js` | | Tween element via scroll position | `scroll/scroll-scrub.js` | | Snap-to-section scroll | `scroll/scroll-snap-scenes.css/.js`, `layout/scroll-snap.css` | | Smooth scroll | `utils/smooth-scroll.js` | | Page transitions (fade/curtain/morph) | `transitions/page-transition-fade.css/.js`, `transitions/page-transition-curtain.css/.js`, `transitions/page-transition-morph.js`, `transitions/view-transitions.js` | | Spring physics / motion | `animations/spring.js`, `animations/physics.js`, `utils/easing.js`, `animations/anime-recipes.js` | | Stagger entrance | `animations/stagger.js`, `animations/anime-recipes.js` (stagger fn) | | Scroll-trigger reveals (AOS) | `animations/aos-lite.css/.js`, `animations/scroll-animations.css/.js`, `animations/inview.css` | | Drag-to-sort list | `interactions/sortable.js` | | Draggable panels (macOS-style) | `components/draggable.js` | | Swipe detection | `interactions/swipe.js` | | Pinch / wheel zoom | `interactions/pinch-zoom.js` | | Pull-to-refresh | `interactions/pull-to-refresh.css/.js` | | Long press | `interactions/long-press.js` | | Form inputs (basic + premium) | `blocks/inputs.css`, `blocks/inputs-pro.css`, `components/forms.css/.js` | | Checkboxes / radios / toggles | `blocks/checkboxes.css`, `blocks/radios.css`, `blocks/toggles.css` | | Range slider | `blocks/sliders.css/.js` | | OTP code input | `blocks/inputs-pro.css` (`.inpx-otp`) | | Success checkmark animation | `feedback/success-checkmark.css` | | Form shake on error | `feedback/error-shake.css` | | Sparkle burst on click | `feedback/sparkle-click.js` | | World map with arcs | `backgrounds/world-map.css/.js` | | Dark mode toggle | `responsive/dark-mode.css` | | Container queries | `layout/container-queries.css` | | Sticky header pattern | `layout/sticky-patterns.css` | | Aspect-ratio media | `layout/aspect-ratios.css` | | Fluid responsive type | `typography/fluid-type.css` | | Variable fonts | `typography/variable-fonts.css` | | SVG drawing/morph | `svg/svg-animations.css/.js` | | Custom select dropdown | `blocks/select.css/.js` | | Multi-select with chips | `blocks/multi-select.css/.js` | | Autocomplete / typeahead input | `blocks/combobox.css/.js` | | Date picker / date range picker | `blocks/date-picker.css/.js` | | File upload (drag & drop) | `blocks/file-upload.css/.js` | | Color picker (hue/sat/alpha/hex) | `blocks/color-picker.css/.js` | | 2-handle range slider (price filter) | `blocks/range-slider.css/.js` | | Star / heart / thumb rating | `blocks/star-rating.css/.js` | | Dropdown menu (overflow / context) | `components/dropdown-menu.css/.js` | | Drawer / side sheet / bottom sheet | `components/drawer.css/.js` | | Command palette (⌘K spotlight) | `components/command-palette.css/.js` | | Popover (auto-positioned floating panel) | `components/popover.css/.js` | | Sortable / sticky-header data table | `data-viz/table.css/.js` | | Bar chart / line chart / pie chart | `data-viz/chart-bar.js` · `data-viz/chart-line.js` · `data-viz/chart-pie.js` | | Code block with copy + diff + line numbers | `components/code-block.css/.js` | | Empty state ("no data", "no results", offline) | `components/empty-state.css` | | 404 / 500 / maintenance / broken page | `components/error-states.css` | | Navbar — many style variants (10) | `components/navbars-pack.css` (`.navp-*`) | | Hero — many style variants (10+) | `components/heroes-pack.css` (`.heropk-*`) | | Footer — many style variants (6) | `components/footers-pack.css` (`.ftrp-*`) | | Card — many style variants (10) | `components/cards-pack.css` (`.cdp-*`) | | CTA section (6 layouts) | `components/cta-sections.css` (`.ctas-*`) | | Feature blocks (3-col, alternating, comparison…) | `components/feature-blocks.css` (`.fbk-*`) | | Logo cloud / "trusted by" | `components/logo-cloud.css` (`.lclo-*`) | | Team grid (about page) | `components/team-grid.css` (`.tgrid-*`) | | Sign-in / sign-up / 2FA / forgot password screen | `components/auth-screens.css` (`.auth-*`) | | Product card (e-commerce) | `components/product-card.css` (`.pcard-*`) | | Cart drawer / mini cart | `components/cart-drawer.css` (uses `components/drawer.*`) | | Quantity stepper (± buttons) | `blocks/quantity-stepper.css/.js` | | Multi-step checkout layout | `components/checkout-flow.css` | | Chat message bubble (sent/received/typing) | `components/chat-bubble.css` | | Chat composer / input (auto-grow + send) | `components/chat-input.css/.js` | | DM / conversation list (sidebar) | `components/message-list.css` | | Threaded comments | `components/comments.css` | | Emoji reactions row + picker | `components/reactions.css/.js` | | Dashboard layout (sidebar + header shell) | `components/dashboard-layout.css` | | Workspace / org switcher | `components/workspace-switcher.css/.js` | | Filter bar (chips + search + sort + bulk) | `components/filter-bar.css` | | Settings list (sectioned rows) | `components/settings-list.css` | | Time picker (hh:mm + slot grid) | `blocks/time-picker.css/.js` | | Schedule / calendar week view | `components/schedule-view.css` | | Countdown timer (days/hours/min/sec) | `components/countdown.css/.js` | | Image lightbox gallery | `media/lightbox.css/.js` | | Custom HTML5 video player | `media/video-player.css/.js` | | Audio player with waveform | `media/audio-waveform.css/.js` | | Emoji picker (categorized + search) | `blocks/emoji-picker.css/.js` | | Country picker w/ flag + dial code | `blocks/country-picker.css/.js` | | Icon picker (Notion-style) | `blocks/icon-picker.css/.js` | | Kanban board (drag-to-reorder cards) | `components/kanban-board.css/.js` | | Full month calendar (with events) | `components/calendar-month.css/.js` | | Mini calendar widget (sidebar) | `components/calendar-month.css` (`.calm-mini`) | | GitHub-style contribution heatmap | `data-viz/heatmap-calendar.css/.js` | | Resizable split panels (VSCode-style) | `layout/resizable-panels.css/.js` | | Breadcrumbs navigation | `components/breadcrumbs.css` | | Pagination (numeric / prev-next / load-more / infinite) | `components/pagination.css/.js` | | Multi-step wizard layout (full screen) | `components/steps-wizard.css` | | Rich text editor (contenteditable + toolbar) | `components/rich-text-editor.css/.js` | | Markdown editor (split-pane preview) | `components/markdown-editor.css/.js` | | Diff viewer (unified / split) | `components/diff-viewer.css/.js` | | Grouped action toolbar (VSCode/Figma-style) | `components/toolbar.css` | | Right-click context menu | `components/context-menu.css/.js` | | Activity feed / audit log | `components/activity-feed.css` | | Status bar (bottom IDE-style) | `components/status-bar.css` | | Onboarding tour / spotlight walkthrough | `components/tour.css/.js` | | Area chart (stacked or single) | `data-viz/chart-area.js` | | Gauge / speedometer chart | `data-viz/chart-gauge.js` | | Radar / spider chart | `data-viz/chart-radar.js` | | Funnel chart (conversion drop-off) | `data-viz/chart-funnel.js` | | Notification center / inbox panel | `components/notification-center.css` (uses drawer) | | Top announcement bar (dismissible) | `components/announcement-bar.css/.js` | | GDPR-style cookie consent banner | `components/cookie-consent.css/.js` | | Inline alert banners (info/success/warning/danger/promo) | `components/banners.css` | | Swipe-to-reveal list actions (iOS-style) | `interactions/swipe-actions.css/.js` | | Instagram-style stories player + tray | `components/stories.css/.js` | | Sticky mobile bottom CTA bar | `components/sticky-cta.css` | | A11y skip-to-content link + sr-only utility | `responsive/skip-link.css` | | Treemap chart | `data-viz/chart-treemap.js` | | Sankey / flow diagram | `data-viz/chart-sankey.js` | | Network / force-directed graph | `data-viz/chart-network.js` | | Stat tile with sparkline + trend | `data-viz/stat-with-sparkline.css` | | Figma-style layers panel | `components/layers-panel.css` | | Figma-style properties / inspector panel | `components/properties-panel.css` | | Color swatches palette | `components/swatches-palette.css` | | Canvas zoom controls (−/+/fit/100%) | `components/zoom-controls.css/.js` | | Phone input (country + national number) | `blocks/phone-input.css/.js` | | JSON tree viewer (collapsible) | `blocks/json-editor.css/.js` | | Tag input (chips + autocomplete) | `blocks/tag-input.css/.js` | | Image cropper (drag selection + circle) | `blocks/image-crop.css/.js` | | Achievement / Steam-style popup | `feedback/achievement-popup.css/.js` | | Level / XP progress meter | `feedback/level-meter.css` | | Streak flame (Duolingo-style) | `feedback/streak-flame.css` | | Animated score counter with +N popup | `feedback/score-counter.css/.js` | | Video/audio timeline scrubber (multi-track) | `media/timeline-scrubber.css` | | Clip trim (in/out handles) | `media/clip-trim.css/.js` | | **60+ preset gradients** (brand / sunset / aurora / cyberpunk / pastel / mono / etc) | `effects/gradients-pack.css` (`.grad-*`) | | Gradient text headlines (Instagram/sunset/cosmic/apple/etc) | `effects/gradient-text.css` (`.gtxt-*`) | | Gradient borders (static / rotating / flowing / beam / breathing / hover) | `effects/gradient-borders.css` (`.gbord-*`) | | Mesh gradient backgrounds (Stripe-style multi-radial) | `effects/gradient-mesh.css` (`.gmesh-*`) | | Animated gradients (slide/pulse/hue/conic-spin/drift/ribbon/shimmer) | `effects/gradient-animations.css` (`.ganm-*`) | | Holographic / iridescent / chrome / oil-slick cards + text | `effects/gradient-holo.css` (`.holo-*`) | | Programmatic gradient builder (random mesh / palettes / mouse-track / spin) | `utils/gradient-builder.js` (`GradientBuilder`) | | Gradient skill reference for Claude (decision tree + cheat sheet) | `gradients.skill.md` (read first when user asks for gradients) | | Aurora animated background (multi-blob) — landing page hero | `backgrounds/aurora-bg.css` (`.aurorabg-*`) | | Vercel-style floating gradient orbs background | `backgrounds/gradient-orbs.css/.js` (`.orbsbg-*`, `GradientOrbs`) | | Sky / time-of-day / nebula / mars / arctic gradient presets | `backgrounds/sky-gradients.css` (`.sky-*` 30+ presets) | | Stripe-homepage-style animated mesh background (brand mimics) | `backgrounds/mesh-bg-stripe.css/.js` (`.meshbg-*`, `MeshBg`) | | Morphing gradient blobs (organic shapes) | `effects/gradient-blobs.css` (`.gblob-*`) | | Diffused colored glow / aura on any element | `effects/gradient-glow.css` (`.gglow-*`) | | Grain / noise texture overlay (Apple-quality finish) | `effects/gradient-noise.css` (`.gnoise-*`) | | Image fade-out / vignette / iris masks | `effects/gradient-mask.css` (`.gmask-*`) | | Multi-color drop shadows matching element gradient | `effects/gradient-shadows.css` (`.gsh-*`) | | Iridescent / soap bubble / CD / opal / mother-of-pearl pack | `effects/iridescent-pack.css` (`.iri-*` 15 variants) | | Liquid metal / chrome / mercury / titanium / gold | `effects/liquid-metal.css` (`.metal-*` 13 variants) | | Animated gradient divider / separator / vertical rule | `effects/gradient-divider.css` (`.gdiv-*`) | | Image duotone filter (Spotify-style) | `effects/duotone.css/.js` (`.dt-*`, `Duotone`) | | Specialty gradient buttons (Instagram/Stripe/Vercel/Holo/Conic/Shimmer) | `blocks/gradient-buttons.css` (`.gbtn-*`) | | Gradient surface cards (solid/border/glass/mesh/spotlight/corner) | `blocks/gradient-cards.css` (`.gcard-*`) | | Gradient progress bars + rings (striped/pulse/indeterminate/segmented) | `blocks/gradient-progress.css/.js` (`.gprog-*`, `.gpring`, `GradientProgress`) | | Gradient badges / pills / status chips | `blocks/gradient-badges.css` (`.gbdg-*`) | | HSL color wheel picker (conic gradient ring + lightness disc) | `components/color-wheel.css/.js` (`.cwheel-*`, `ColorWheel`) | | Hero stat numbers with gradient fill | `typography/gradient-numbers.css` (`.gnum-*`) | | Reusable SVG gradient `` (palette + linear/radial builder) | `svg/gradient-defs.js` (`SvgDefs.mount/.linear/.radial/.palette`) | | Extract palette / dominant color from an image (k-means) | `utils/gradient-extract.js` (`GradientExtract.fromImage`) | | Interactive mesh gradient editor (drag-to-position stops) | `utils/mesh-editor.js` (`MeshEditor.init`) | | Whatamesh / Stripe-style WebGL mesh gradient shader | `shaders/mesh-gradient-wgl.glsl.js` (`MeshGradientWGLShader`) | | Soft animated multi-color flow gradient shader | `shaders/gradient-flow.glsl.js` (`GradientFlowShader`) | | Gradient fill INSIDE a PNG / SVG / logo (mask-image) | `effects/image-gradient.css` (`.imggrad-*`) + `effects/image-gradient.js` (`ImageGradient.apply/.mask/.fill/.inline`) | | Multi-color gradient halo / glow WRAPPED AROUND a PNG/SVG/logo alpha | `effects/logo-glow.css` (`.logoglow-*`) + `ImageGradient.halo()` | | Caustics — water-surface light patterns (pool / ocean / arctic / lava) | `effects/caustics.css` (`.caustics-*` 9 variants) | | Watercolor splotchy bleed (painterly editorial) | `effects/watercolor.css` (`.wc-*` 11 palettes + paper grain) | | Tie-dye psychedelic swirl (conic + blur) | `effects/tie-dye.css` (`.tie-dye-*` 11 variants — classic/festival/cosmic/cyberpunk/starburst/vortex/eye) | | Stepped / banded / posterized / dithered / pixel gradients | `effects/stepped-gradient.css` (`.step-*`, `.dither-*`, `.pixel-grad-*`) | | Crystal / gemstone / faceted gradients (diamond, ruby, opal, prism) | `effects/crystal-facets.css` (`.cryst-*` 12 variants + hex/round/pear cuts) | | Lava lamp metaballs (gooey morphing blobs) | `effects/lava-lamp.css` (`.lava-*` 10 palettes) | | Animated fire / flames / embers (CSS-only) | `effects/fire.css` (`.fire-*` 7 colors + ember-only + logo-fire overlay) | | Animated smoke / fog / mist / steam | `effects/smoke.css` (`.smoke-*` 11 variants — magical/toxic/cyber/incense/dust/blood) | | Glass refraction / chromatic aberration / RGB-split text+images | `effects/glass-refraction.css` (`.gref-text-*`, `.gref-img-*`, `.gref-pane-*`, `.gref-blob`) | | Color-theory palette generator (complementary/triadic/tetradic/analogous/monochromatic) | `utils/palette-generator.js` (`PaletteGenerator` global) | | Gradient avatar / identicon from a string hash (Discord/GitHub/Stripe-style) | `components/gradient-avatar.css/.js` (`.gav-*`, `GradientAvatar.init/.render/.svg`) | --- ## Snippets (tagged, alphabetical within each section) ### Animations & keyframes **keyframes.css** `animations/keyframes.css` (CSS) — tags: animation keyframe library pulse spin float fade-in slide rotate bounce Core baseline keyframes used across other snippets. Pulse, spin, float, fadeIn, slideUp. **keyframes-pack.css** `animations/keyframes-pack.css` (CSS) — tags: animation keyframe pack animate.css rubber-band jello wobble swing heartbeat tada flash bounce head-shake hinge roll light-speed zoom-soft flip slide spin-bounce sheen glow-pulse pop-in drop-in 28 named keyframes under `.kp-*`. Modifiers: kp-fast, kp-slow, kp-infinite, kp-delay-1/2/3. **transitions.css** `animations/transitions.css` (CSS) — tags: transition curve easing duration utility Pre-set CSS transition utilities (ease, swift, bouncy) you compose onto elements. **inview.css** `animations/inview.css` (CSS) — tags: scroll inview entrance reveal stagger fade slide Entrance animations triggered by `.is-inview` class (paired with an IntersectionObserver). **spring.js** `animations/spring.js` (JS, global: `Spring`, `animateSpring`) — tags: spring physics motion stiffness damping animation Spring-based animation with stiffness/damping/mass presets. `animateSpring(el, {from, to, ...})`. **physics.js** `animations/physics.js` (JS, global: `Physics`) — tags: physics bounce gravity inertia momentum animation Bounce, gravity, friction utilities for physics-driven motion. **scroll-animations.css** `animations/scroll-animations.css` (CSS) — tags: scroll reveal animation fade slide entrance CSS classes that animate as `ScrollAnim.reveal()` adds the active class. **scroll-animations.js** `animations/scroll-animations.js` (JS, global: `ScrollAnim`) — tags: scroll reveal animation intersection-observer `.reveal(selector, {animation, threshold, stagger})`, `.scrub()`, `.progress()`. **stagger.js** `animations/stagger.js` (JS, global: `Stagger`) — tags: stagger sequence list entrance grid Stagger child animations: `entrance`, `transform`, `gridStagger`. **timeline.js** `animations/timeline.js` (JS, global: `Timeline`) — tags: timeline sequence parallel orchestration Compose animations sequentially or in parallel: `Timeline.sequence([...])`. **aos-lite.css** `animations/aos-lite.css` (CSS) — tags: aos scroll reveal data-attribute fade zoom slide flip rotate Styles for `[data-aos="fade-up"]` etc. Paired with `aos-lite.js`. **aos-lite.js** `animations/aos-lite.js` (JS, global: `AosLite`) — tags: aos scroll reveal data-attribute intersection-observer animate-on-scroll AOS-style: `AosLite.init()`. Attributes: data-aos, data-aos-delay/-duration/-once/-anchor. **anime-recipes.js** `animations/anime-recipes.js` (JS, global: `AnimeRecipes`) — tags: anime tween timeline stagger easing motion zero-deps Vanilla anime.js-style: `tween(target, {to, duration, easing, delay})`, `timeline()`, `stagger(amount)`. --- ### Backgrounds & patterns **patterns.css** `backgrounds/patterns.css` (CSS) — tags: background pattern stripes dots grid diagonal checker Repeating CSS-only background patterns. **aurora.css** `backgrounds/aurora.css` (CSS) — tags: background aurora gradient blur conic glow hero Aurora gradient hero background (animated blurred conic blobs). **animated-bg.css** `backgrounds/animated-bg.css` (CSS) — tags: background animated gradient waves spotlight interactive Companion styles for animated-bg.js. **animated-bg.js** `backgrounds/animated-bg.js` (JS, global: `AnimatedBG`) — tags: background spotlight interactive-gradient waves canvas `AnimatedBG.spotlight()`, `.interactiveGradient()`, `.waves()`. **grid-bg-spotlight.css** `backgrounds/grid-bg-spotlight.css` (CSS) — tags: background grid spotlight radial-mask aceternity hero dark Grid background with central radial spotlight mask. Variants: dots, cyan/pink/amber, light. **world-map.css** `backgrounds/world-map.css` (CSS) — tags: world-map dots geography arcs map background Styles for the procedurally-drawn dotted world map (companion to world-map.js). **world-map.js** `backgrounds/world-map.js` (JS, global: `WorldMap`) — tags: world-map continents arcs lat-lng geography aceternity dots Procedurally renders a dotted world map with animated arcs between lat/lng pairs. **aurora-bg.css** `backgrounds/aurora-bg.css` (CSS) — tags: aurora bg background hero landing-page blurred-blobs multi-blob conic radial mood violet cyan sunset cosmic dawn cyber mint rose noir light fixed grain Multi-blob aurora animated bg. 11 color variants + fixed/strong/soft/grain modifiers. Pure CSS pseudo-elements, no JS. **gradient-orbs.css** `backgrounds/gradient-orbs.css` (CSS) — tags: orbs floating blurred radial gradient bg vercel linear framer hero pastel cyber cosmic huge tight Floating blurred orb bg via `.orbsbg > .orb`. 10 palette presets + size/density modifiers. **gradient-orbs.js** `backgrounds/gradient-orbs.js` (JS, global: `GradientOrbs`) — tags: orbs dynamic generate parallax pointer-track palette drift waapi Programmatically inject N orbs into a container. Supports parallax (orbs follow pointer) + WAAPI drift animations. **sky-gradients.css** `backgrounds/sky-gradients.css` (CSS) — tags: sky gradient dawn sunrise sunset twilight blue-hour dusk night midnight aurora storm fog mars jupiter venus pastel cotton-candy arctic savanna deep-space galactic nebula time-of-day atmospheric 30+ sky/atmosphere gradient presets — dawn through midnight + alien worlds (mars/jupiter) + nebulas. `.sky-radial` / `.sky-conic` / `.sky-animate` modifiers. **mesh-bg-stripe.css** `backgrounds/mesh-bg-stripe.css` (CSS) — tags: mesh-gradient bg stripe vercel linear shopify figma supabase arc notion spotify anthropic discord whatamesh hero landing Stripe-homepage-style animated mesh gradient. 12 brand-inspired presets + light modifier. **mesh-bg-stripe.js** `backgrounds/mesh-bg-stripe.js` (JS, global: `MeshBg`) — tags: mesh-gradient programmatic whatamesh palette regenerate animate waapi snapshot Build mesh gradients procedurally (random blob positions). Includes 12 palettes, regenerate(), snapshot(). --- ### Borders **animated-borders.css** `borders/animated-borders.css` (CSS) — tags: border animated gradient conic neon glow draw Animated border styles (gradient sweeps, neon glows, draw-in lines). --- ### Buttons **buttons.css** `blocks/buttons.css` (CSS) — tags: button primary secondary outline ghost icon size Baseline button library (primary/secondary/ghost/outline/icon, sm/md/lg). **buttons.js** `blocks/buttons.js` (JS, global: `Buttons`) — tags: button ripple magnetic submit click `.ripple()`, `.magnetic()`, `.submit()` (loading state). **buttons-pack.css** `blocks/buttons-pack.css` (CSS) — tags: button pack uiverse neon glass 3d gooey soft flip slide-fill border-draw glow-arrow cta skew icon-pop pulse rounded-arrow ghost-underline split ribbon tag 18 button variants under `.btnp-*`. Sizes btnp-sm/lg/xl. **shimmer-button.css** `blocks/shimmer-button.css` (CSS) — tags: button shimmer conic glow magic-ui pill rainbow Pill button with rotating shimmer trail. Variants: ghost, light, rainbow, sm/lg. **rainbow-button.css** `blocks/rainbow-button.css` (CSS) — tags: button rainbow gradient sliding glow magic-ui pastel vivid outline Animated rainbow gradient pill. Variants: outline, flat, pastel, vivid, sm/lg. **pulsating-button.css** `blocks/pulsating-button.css` (CSS) — tags: button pulse ring breathing recording cta danger success Pulse-ring CTA. Variants: soft, fast, danger, success, double, sm/lg. Optional `.pulse-btn-dot` recording indicator. **gradient-buttons.css** `blocks/gradient-buttons.css` (CSS) — tags: button gradient specialty aurora sunset cosmic cyber ocean fire mint rose gold instagram stripe vercel discord spotify holo conic shimmer glow outline ghost 3d pill rounded 20+ gradient button variants. Includes brand recreations (Instagram/Stripe/Vercel/Discord/Spotify/Twitch/Figma) + holo (Pokémon foil) + conic (rotating border) + shimmer + glow + outline/ghost. **gradient-cards.css** `blocks/gradient-cards.css` (CSS) — tags: card gradient surface solid border glass glow mesh corner spotlight holo cta apple stripe linear pricing feature Gradient-filled surface cards. 11 colors + 7 styles (solid/border/glass/glow/mesh/corner/spotlight). Holo + CTA variants. **gradient-progress.css** `blocks/gradient-progress.css` (CSS) — tags: progress bar ring gradient striped pulse glow indeterminate segmented stack soundcloud spotify apple-health Gradient progress bars + rings. Variants: striped, pulse, glow, indeterminate, segmented, stack, gpring (circular). **gradient-progress.js** `blocks/gradient-progress.js` (JS, global: `GradientProgress`) — tags: progress controller animate-to set easing waapi label Controller for gprog/gpring elements. `set(target, value)`, `animateTo(target, value, opts)`, `init('[data-gprog]')`. **gradient-badges.css** `blocks/gradient-badges.css` (CSS) — tags: badge pill tag status gradient github linear stripe holo pulse live count new outline ghost soft brand Gradient pills + status badges. 11 colors + brand (Instagram/Discord/Spotify/Vercel) + holo + outline/ghost/soft/glow + pulse-dot live indicator + count. --- ### Cards **cards.css** `components/cards.css` (CSS) — tags: card hover flip expand spotlight tilt grid Card primitives + variants (flip, expand, spotlight). **cards.js** `components/cards.js` (JS, global: `Cards`) — tags: card flip expand tilt spotlight hover `.flip()`, `.expand()`, `.tilt()`, `.spotlight()`. **cards-3d.css** `components/cards-3d.css` (CSS) — tags: card 3d tilt parallax layers aceternity depth perspective glass Tilt card with parallaxing inner layers (via `data-card3d-depth`). Variants: glass, flat. **cards-3d.js** `components/cards-3d.js` (JS, global: `Cards3D`) — tags: card 3d tilt parallax mouse hover perspective layers `Cards3D.init('[data-card3d]', {maxTilt, perspective, scale})`. Reads `data-card3d-depth` on children. --- ### Components — Hero & Navigation **heroes.css** `components/heroes.css` (CSS) — tags: hero video ken-burns parallax text-reveal landing Hero section variants (video bg, Ken Burns image, parallax layers). **heroes.js** `components/heroes.js` (JS, global: `Heroes`) — tags: hero video ken-burns parallax text-reveal init `.video()`, `.kenBurns()`, `.parallaxLayers()`, `.textReveal()`. **hero-parallax.css** `components/hero-parallax.css` (CSS) — tags: hero parallax scroll multi-row product-grid aceternity perspective 3D-perspective stacked rows that scroll-drift in opposite directions. **hero-parallax.js** `components/hero-parallax.js` (JS, global: `HeroParallax`) — tags: hero parallax scroll multi-row drift product-grid `HeroParallax.init('.hero-parallax', {rowDriftX, rotateLift})`. **navbars.css** `components/navbars.css` (CSS) — tags: navbar nav top sticky transparent scroll-aware mega-menu hamburger Navbar variants. **navbars.js** `components/navbars.js` (JS, global: `Nav`) — tags: navbar scroll-aware hamburger mega-menu active-link `.scrollAware()`, `.hamburger()`, `.megaMenu()`, `.activeLink()`. **dock.css** `components/dock.css` (CSS) — tags: dock macos magnification floating-bar glass tooltip macOS-style dock styles. Variants: floating, vertical, glass, light. **dock.js** `components/dock.js` (JS, global: `Dock`) — tags: dock magnification mouse-tracking macos `Dock.init('.dock', {baseSize, magnification, distance, axis})`. **tabs.css** `components/tabs.css` (CSS) — tags: tabs underline keyboard accessible Baseline tabs with underline indicator. **tabs.js** `components/tabs.js` (JS, global: `Tabs`) — tags: tabs keyboard accessible underline indicator `Tabs.init('#tabs')` — handles arrow keys. **animated-tabs.css** `components/animated-tabs.css` (CSS) — tags: tabs pill sliding linear skiper-ui segmented Sliding-pill tabs (variant of `tabs.css`). Variants: soft, rounded, vertical. **animated-tabs.js** `components/animated-tabs.js` (JS, global: `AnimatedTabs`) — tags: tabs pill sliding panel switch `AnimatedTabs.init('[data-atabs]', {panelsSelector, onChange})`. --- ### Components — Content **modals.css** `components/modals.css` (CSS) — tags: modal dialog overlay morph Modal/dialog styles (centered, side, morph). **modals.js** `components/modals.js` (JS, global: `Modal`) — tags: modal dialog open close trigger morph `.open()`, `.close()`, `.bindTriggers()`, `.morph()`. **forms.css** `components/forms.css` (CSS) — tags: form input floating-label validation wizard password-strength Form layouts with floating labels and validation states. **forms.js** `components/forms.js` (JS, global: `Forms`) — tags: form floating-label validate step-wizard password-strength `.floatingLabel()`, `.validate()`, `.stepWizard()`, `.passwordStrength()`. **faq.css** `components/faq.css` (CSS) — tags: faq accordion expandable Accordion / FAQ styles. **faq.js** `components/faq.js` (JS, global: `FAQ`) — tags: faq accordion single-open multi-open `FAQ.init('#faq', {singleOpen})`. **testimonials.css** `components/testimonials.css` (CSS) — tags: testimonial carousel quote review Testimonial card + carousel styles. **testimonials.js** `components/testimonials.js` (JS, global: `Testimonials`) — tags: testimonial carousel autoplay swipe touch `Testimonials.carousel('#x', {autoplay})`. **timeline.css** `components/timeline.css` (CSS) — tags: timeline history milestones vertical Baseline vertical timeline styles. **timeline-vertical-progress.css** `components/timeline-vertical-progress.css` (CSS) — tags: timeline progress scroll fill rail markers reached Vertical timeline with scroll-driven progress fill. Variants: right, soft, cyan, pink. **timeline-vertical-progress.js** `components/timeline-vertical-progress.js` (JS, global: `TimelineVerticalProgress`) — tags: timeline scroll progress fill reached `TimelineVerticalProgress.init('[data-tlvp]', {trigger})`. **stats.css** `components/stats.css` (CSS) — tags: stats numbers counter grid metrics Stats grid styles. **stats.js** `components/stats.js` (JS, global: `Stats`) — tags: stats counter count-up scroll-trigger `.init()`, `.countUp()` (scroll-triggered). **pricing.css** `components/pricing.css` (CSS) — tags: pricing plan card monthly yearly tier Pricing tier card styles. **pricing-toggle.css** `components/pricing-toggle.css` (CSS) — tags: pricing toggle monthly yearly switch segmented pill Monthly/yearly toggle with sliding pill and price flip class. **pricing-toggle.js** `components/pricing-toggle.js` (JS, global: `PricingToggle`) — tags: pricing toggle monthly yearly flip price-update `PricingToggle.init('[data-ptog]')`. Auto-updates `.ptog-price` cells via `data-ptog-`. **footers.css** `components/footers.css` (CSS) — tags: footer columns links newsletter copyright Footer layouts. **marquee.css** `components/marquee.css` (CSS) — tags: marquee ticker scroll infinite text logos Infinite scrolling marquee rail. **marquee.js** `components/marquee.js` (JS, global: `Marquee`) — tags: marquee scroll-velocity infinite trucknroll Marquee with scroll-velocity influence: `Marquee.init('.marquee', {speed, scrollInfluence})`. **marquee-3d.css** `components/marquee-3d.css` (CSS) — tags: marquee 3d perspective tilt stack rows magic-ui Perspective-tilted stack of marquee rows. **notification-stack.css** `components/notification-stack.css` (CSS) — tags: notification stack toast feed list Stacked notification list styles. **animated-list.css** `components/animated-list.css` (CSS) — tags: list animated cycling notification stacking magic-ui Auto-cycling list with stacking entrance. **animated-list.js** `components/animated-list.js` (JS, global: `AnimatedList`) — tags: list animated cycling items entrance magic-ui `AnimatedList.init('.animated-list', {delay, maxVisible, loop, items: [{title, meta, icon}]})`. **draggable.js** `components/draggable.js` (JS, global: `Draggable`) — tags: draggable panel window macos stacking macOS-style draggable panels: `Draggable.init('.panel', {handle, stack})`. **bento-grid.css** `components/bento-grid.css` (CSS) — tags: bento grid asymmetric layout primitive apple magic-ui Asymmetric grid with sized cells: bento-sm/md/lg/wide/tall/xl/full. **file-tree.css** `components/file-tree.css` (CSS) — tags: file-tree explorer sidebar vscode collapsible folder Collapsible nested file/folder tree. Variants: compact, light. **file-tree.js** `components/file-tree.js` (JS, global: `FileTree`) — tags: file-tree tree nested data renderer Bind to markup or pass `data: [{name, type, children}]`. Auto-renders icons by file extension. **terminal.css** `components/terminal.css` (CSS) — tags: terminal console fake typed dots traffic-light Fake terminal styles. Variants: light, mono, rounded-lg. **terminal.js** `components/terminal.js` (JS, global: `Terminal`) — tags: terminal type lines cmd output ok error loop `Terminal.init('[data-terminal]', {lines: [{type, text, delay}], loop, speed})`. **orbiting-circles.css** `components/orbiting-circles.css` (CSS) — tags: orbit revolve rings center icons magic-ui Items revolving around a center. Multiple rings supported. **feature-grid-hover.css** `components/feature-grid-hover.css` (CSS) — tags: feature grid hover spotlight stripe linear cult-ui radial Grid where each cell shows a radial spotlight that follows the cursor. **feature-grid-hover.js** `components/feature-grid-hover.js` (JS, global: `FeatureGridHover`) — tags: feature grid spotlight cursor radial cursor-track `FeatureGridHover.init('[data-fgh]')` — sets `--cell-x` / `--cell-y` on each cell. **dynamic-island.css** `components/dynamic-island.css` (CSS) — tags: dynamic-island iphone pill notification expand cult-ui Expanding pill notification. Variants: static, floating, bottom. **dynamic-island.js** `components/dynamic-island.js` (JS, global: `DynamicIsland`) — tags: dynamic-island toggle expand collapse pill notification `DynamicIsland.init('.di', {autoCollapse, onExpand, onCollapse})`. **family-button.css** `components/family-button.css` (CSS) — tags: fab floating-action-button morph cult-ui expand staggered icon-menu FAB that expands into a row of staggered action buttons. Variants: up, down, glass, sm, lg. **family-button.js** `components/family-button.js` (JS, global: `FamilyButton`) — tags: fab morph open close outside-click action-menu `FamilyButton.init('.fam', {closeOnOutside, onAction})`. --- ### Cursors & Hover **cursor-effects.js** `effects/cursor-effects.js` (JS, global: `CursorFX`) — tags: cursor magnetic trail spotlight custom `.magnetic()`, `.trail()`, `.spotlight()`, `.customCursor()`. **cursor-glow.css** `effects/cursor-glow.css` (CSS) — tags: cursor glow spotlight dark hero linear vercel radial Cursor-following radial glow for dark sections. Variants: soft, tight, cyan/pink/amber/mint, rect. **cursor-glow.js** `effects/cursor-glow.js` (JS, global: `CursorGlow`) — tags: cursor glow track lerp radial mouse `CursorGlow.init('[data-cursor-glow]', {lerp})` — sets `--cg-x`/`--cg-y` with smoothing. **blob-cursor.css** `effects/blob-cursor.css` (CSS) — tags: cursor blob gooey trail mix-blend-mode awwwards Gooey blob cursor with SVG goo filter. `.is-near`, `.is-press` states. **blob-cursor.js** `effects/blob-cursor.js` (JS, global: `BlobCursor`) — tags: cursor blob gooey trail follow custom `BlobCursor.init({color, size, hoverSelector, trailLerp, dotLerp})`. **cursor-magnetic.js** `interactions/cursor-magnetic.js` (JS, global: `CursorMagnetic`) — tags: magnetic target hover spring smooth pull Targets pulled toward cursor with spring smoothing. `data-magnetic-child` for parallax children. --- ### Effects — surfaces & finishes **glassmorphism.css** `effects/glassmorphism.css` (CSS) — tags: glass frosted blur backdrop-filter card overlay Glassmorphic surface utility (`.glass`, `.glass-dark`, etc.). **gradients.css** `effects/gradients.css` (CSS) — tags: gradient utility linear radial conic mesh Reusable gradient utility classes. **shadows.css** `effects/shadows.css` (CSS) — tags: shadow box-shadow neumorphism depth elevation soft Shadow utilities (soft, sharp, neumorph). **noise-grain.css** `effects/noise-grain.css` (CSS) — tags: noise grain film texture svg overlay Subtle film grain overlay via SVG turbulence. **glitch.css** `effects/glitch.css` (CSS) — tags: glitch rgb-split datamosh distortion retro Glitch / RGB-split text/element effect. **morphing.css** `effects/morphing.css` (CSS) — tags: morph blob shape-shifting border-radius Morphing blob / shape transitions via animated border-radius. **post-processing.css** `effects/post-processing.css` (CSS) — tags: post-processing filter vignette grain bloom-fake CSS-only "post-processing" looks (vignette, grain, fake bloom). **hover-effects.css** `effects/hover-effects.css` (CSS) — tags: hover lift glow tilt rise spread Hover utility classes for lift/glow/tilt. **gradient-blobs.css** `effects/gradient-blobs.css` (CSS) — tags: blob organic morph border-radius gradient haikei codrops floating aurora sunset cyber pastel cosmic glow blurred Morphing organic shapes with gradient fills. 10 color variants + sizes (sm/md/lg/xl/full) + spin/glow/blurred modifiers. **gradient-glow.css** `effects/gradient-glow.css` (CSS) — tags: glow halo aura colored-shadow vercel apple cta button card pulse spin floor hover Diffused colored auras via box-shadow. Variants: soft, strong, huge, pulse, spin (conic halo), floor (under-glow), hover-only. **gradient-noise.css** `effects/gradient-noise.css` (CSS) — tags: noise grain texture overlay svg-turbulence apple stripe film polished fine coarse warm cool color animated Grain texture overlay for gradients. Intensities light/medium/heavy/extreme + warm/cool/color modes + animated. **gradient-mask.css** `effects/gradient-mask.css` (CSS) — tags: mask fade-out vignette iris diamond image scroll-fade edges top bottom left right radial spotlight apple Image & content fade masks via mask-image. 15+ variants: top/bottom/left/right, both-v/h, vignette, iris, diamond, soft-edges, scroll-fade. **gradient-shadows.css** `effects/gradient-shadows.css` (CSS) — tags: shadow colored multi-color drop-shadow button card vercel shadcn aurora sunset cosmic cyber rose mint fire gold violet Multi-color box-shadows matching element gradient. 11 color presets + soft/strong/glow/floor/around + hover/filter variants. **iridescent-pack.css** `effects/iridescent-pack.css` (CSS) — tags: iridescent holographic soap-bubble cd dvd oil-slick pearl mother-of-pearl opal prism rainbow-stripe foil mirror-ball aurora-foil mercury chrome pokemon-card y2k 15 iridescent variants — soap, CD, DVD, oil-thick, pearl, opal, holo-card, prism, foil, mirror-ball, aurora-foil, mercury-rainbow, etc. **liquid-metal.css** `effects/liquid-metal.css` (CSS) — tags: metal chrome silver mercury titanium platinum rose-gold gold-liquid copper bronze gunmetal obsidian iridescent-chrome brushed terminator-t1000 apple-silver y2k 13 metallic surface variants. Modifiers: anim (flow), tilt (mouse-tracked), sheen (sweeping highlight). **gradient-divider.css** `effects/gradient-divider.css` (CSS) — tags: divider separator rule line gradient animated flowing horizontal vertical fade dotted double glow text-with-line Animated gradient dividers (hr replacement). 11 colors + thicknesses + fade/dotted/double/glow/text/vertical modifiers. **duotone.css** `effects/duotone.css` (CSS) — tags: duotone image filter two-tone spotify apple-music vox editorial cyber sunset noir vaporwave spotify-green classic-blue toxic grape coral sepia 20 duotone presets via background-blend-mode. Strengths soft/strong/extreme + hover-reveal variant. **duotone.js** `effects/duotone.js` (JS, global: `Duotone`) — tags: duotone image svg-filter true-duotone feColorMatrix feComponentTransfer palette dynamic True SVG-filter-based duotone (sharper than blend-mode CSS). `Duotone.apply(el, {palette, dark, light})` + `init('[data-duotone]')`. **image-gradient.css** `effects/image-gradient.css` (CSS) — tags: image-gradient mask-image png svg logo icon wordmark gradient-fill silhouette apple-product-color vercel-logo linear-icon brand contain cover holo chrome shimmer two-tone aurora cosmic sunset cyber holo wrap-around png-fill svg-fill logo-fill Fill a PNG/SVG/logo with a gradient via `mask-image: var(--src)`. 20+ palette presets (aurora, cosmic, instagram, stripe, vercel, holo, chrome, etc.) + sizes xs→hero + wordmark/banner aspect ratios + anim/spin/hover/shimmer modifiers + two-tone (gradient blend over original) + wrap mode for existing ``. **image-gradient.js** `effects/image-gradient.js` (JS, global: `ImageGradient`) — tags: image-gradient logo png svg inline-svg external-svg fetch mask-image fill-attribute auto-detect halo drop-shadow apply init data-attribute palette method-auto-mask-fill-inline-halo Auto-detects PNG / external SVG / inline SVG and applies the right technique. `apply()` chooses; `.mask()` for PNG, `.fill()` for inline SVG (injects `` + rewires fills/strokes), `.inline()` fetches external SVG and inlines it, `.halo()` for drop-shadow chain. 22 palettes built-in. `init('[data-img-gradient]')` reads data attrs. **logo-glow.css** `effects/logo-glow.css` (CSS) — tags: logo-glow halo png-glow svg-glow drop-shadow-chain multi-color brand reveal vercel apple keynote neon rim sticker floor pulse hover hue-rotate alpha-channel Multi-color gradient halo following the alpha channel of any logo/PNG/SVG via stacked `drop-shadow()` filters. 18 color presets + intensity (soft/strong/extreme/halo) + behaviors (pulse, hover, floor under-glow, rim light, sticker neon, rotating hue). **caustics.css** `effects/caustics.css` (CSS) — tags: caustics water pool ocean swimming-pool sunlight refraction shadertoy aquarium tropical arctic sunset night emerald mono rainbow underwater overlay deep Pure-CSS water-surface light pattern via animated overlapping radial gradients with screen blend. 9 variants (pool/tropical/ocean/arctic/sunset/night/emerald/mono/rainbow) + still/overlay/deep/fast/slow modifiers. Standalone `.caustics-layer` overlay for any image. **watercolor.css** `effects/watercolor.css` (CSS) — tags: watercolor paint splotch bleed editorial squarespace pinterest moodboard painterly artistic bloom spring sunset ocean meadow rose cosmic mono pastel citrus bruise paper-grain Soft splotchy gradient bleeds. 11 palette variants. Modifiers: paper grain overlay, edges-soft/-hard, anim drift, dense/sparse splotch counts. `.wc-blob` for inline text highlights. **tie-dye.css** `effects/tie-dye.css` (CSS) — tags: tie-dye spiral swirl psychedelic 60s festival rainbow conic-gradient blur cosmic cyberpunk fire ocean forest pastel mono starburst vortex eye-of-storm Swirling conic gradients with heavy blur. 11 variants (classic/festival/pastel/fire/ocean/forest/cosmic/mono/cyberpunk/starburst/vortex/eye). Spin/pulse animations + soft/sharp/crisp blur control + mask fade-to-transparent. **stepped-gradient.css** `effects/stepped-gradient.css` (CSS) — tags: stepped banded posterized riso risograph dithered pixel pixel-art 8-bit game-boy nes cga retro-game cmyk poster band-count radial conic vertical horizontal diagonal hard-stops 3 distinct techniques. `.step-*` 10 palettes + 5 band counts + radial/conic. `.dither-*` 7 SVG-noise dither presets. `.pixel-grad-*` quantized blocks (NES/CGA/Game Boy/cosmic/sunset/mint). **crystal-facets.css** `effects/crystal-facets.css` (CSS) — tags: crystal gem gemstone diamond ruby sapphire emerald amethyst topaz opal onyx rose-quartz aquamarine fluorite prism low-poly faceted jewelry art-deco shine hex round pear cut Faceted geometric gradients. 12 gemstone variants + low-poly. Cuts via clip-path: hex / round / pear. Modifiers: anim (pulse), spin, shine (sweeping highlight). **lava-lamp.css** `effects/lava-lamp.css` (CSS) — tags: lava-lamp metaballs gooey blob morphing filter-blur-contrast retro 70s ios-memory aurora acid ocean cosmic mint fire ice mono rainbow chimney Gooey morphing blobs via `filter: blur(20px) contrast(20)` metaballs trick. 10 color variants + rainbow (each blob different color) + density/speed/bordered modifiers. Includes `.lava-stack` pattern for content overlays. **fire.css** `effects/fire.css` (CSS) — tags: fire flame ember bonfire dragonfire witchfire campfire blue-flame green-flame purple cold-fire pink cotton-candy rainbow ember-only logo-on-fire flicker rising Pure-CSS animated flames + embers. 7 color variants (orange/blue/green/purple/pink/cold/rainbow) + sizes sm→xl + ember-only mode + `.fire-overlay` for putting flames behind a logo/text. **smoke.css** `effects/smoke.css` (CSS) — tags: smoke fog mist steam haze cloud cinematic atmospheric horror theatrical magical toxic cyber chimney incense dust desert blood ground-fog drift rising Drifting rising smoke puffs. 11 variants (mist/fog/steam/toxic/magical/cyber/chimney/incense/dust/blood). Modifiers: bottom-anchored ground fog, dense/sparse, speed control. Pairs with .fire for chimney scenes. **glass-refraction.css** `effects/glass-refraction.css` (CSS) — tags: glass refraction chromatic-aberration rgb-split prism spectral apple-vision-pro glitch vaporwave acid rainbow text image svg pane edge-bleed blob chromatic Chromatic aberration / RGB-split effect. 6 text variants + 4 image variants (drop-shadow chain) + glass pane with spectral edge bleed (5 variants) + `.gref-blob` animated chromatic ball. Includes glitch animation. --- ### Effects — backgrounds & overlays **spotlight-reveal.css** `effects/spotlight-reveal.css` (CSS) — tags: spotlight dot-grid mask mouse-track reveal Dot pattern with mouse-tracking radial spotlight reveal. **spotlight-reveal.js** `effects/spotlight-reveal.js` (JS, global: `SpotlightReveal`) — tags: spotlight dot mask mouse lerp `SpotlightReveal.init('#x', {radius, lerp})`. **spotlight-v2.css** `effects/spotlight-v2.css` (CSS) — tags: spotlight blob radial drift aceternity hero soft Soft drifting radial spotlight blob (no dot grid). Distinct from spotlight-reveal. **lamp.css** `effects/lamp.css` (CSS) — tags: lamp cone hero conic-gradient glow overhead aceternity Overhead lamp glow with two cones + bar + halo + content slot. Variants: cyan, pink, amber, mint, tall, animate. **aurora-text.css** `effects/aurora-text.css` (CSS) — tags: text gradient aurora animated sliding hero Animated multi-stop gradient text fill. Variants: vivid, pastel, slow, fast, glow. **border-beam.css** `effects/border-beam.css` (CSS) — tags: border beam rotating conic gradient magic-ui Rotating gradient beam around a border. Variants: thin, thick, slow, fast, rainbow. **shine-border.css** `effects/shine-border.css` (CSS) — tags: border shine conic gradient breathing magic-ui Gradient border that breathes. Variants: soft, vivid, double. **ripple.css** `effects/ripple.css` (CSS) — tags: ripple rings concentric ambient pulse magic-ui Concentric expanding rings (ambient pulse effect). **dot-pattern.css** `effects/dot-pattern.css` (CSS) — tags: pattern dots radial-gradient background magic-ui fade Repeating dot background. Variants: sm/md/lg/xl, fade radial/top/bottom, stagger, accent. **grid-pattern.css** `effects/grid-pattern.css` (CSS) — tags: pattern grid square lines background magic-ui dashed fade Repeating grid lines background. Variants: dashed, cross, iso, fade radial/top/side. **retro-grid.css** `effects/retro-grid.css` (CSS) — tags: grid retro perspective synthwave 80s floor horizon magic-ui 80s-style perspective grid floor. Variants: purple, amber, cyan, slow, fast. **flickering-grid.css** `effects/flickering-grid.css` (CSS) — tags: grid flicker canvas magic-ui pattern Wrapper styles for canvas-based flickering grid. **flickering-grid.js** `effects/flickering-grid.js` (JS, global: `FlickeringGrid`) — tags: grid flicker canvas random cells animated `FlickeringGrid.init('.flickering-grid', {squareSize, gridGap, flickerChance, color, maxOpacity})`. **animated-grid-pattern.css** `effects/animated-grid-pattern.css` (CSS) — tags: grid pattern pulse highlight cells magic-ui Grid background with SVG cells pulsing on top. **animated-grid-pattern.js** `effects/animated-grid-pattern.js` (JS, global: `AnimatedGridPattern`) — tags: grid pulse highlight cells random animated `AnimatedGridPattern.init('.animated-grid-pattern', {numSquares, cellSize, duration, maxOpacity})`. **meteors.css** `effects/meteors.css` (CSS) — tags: meteors streaks falling diagonal background magic-ui aceternity Falling diagonal streaks. Variants: dense, sparse, slow, fast, amber, mint, rose. **meteors.js** `effects/meteors.js` (JS, global: `Meteors`) — tags: meteors spawn random falling streaks `Meteors.init('.meteors', {count, minDuration, maxDuration})` — injects spans. **wavy-background.css** `effects/wavy-background.css` (CSS) — tags: wavy background canvas waves blur aceternity Wrapper styles for canvas wavy background. **wavy-background.js** `effects/wavy-background.js` (JS, global: `WavyBackground`) — tags: wavy background canvas sin-noise waves blur `WavyBackground.init('.wavy-bg', {colors, waveWidth, speed, opacity, amplitude})`. **sparkles.css** `effects/sparkles.css` (CSS) — tags: sparkles twinkle dots magic aceternity hero Wrapper + dot styles for randomized twinkles. **sparkles.js** `effects/sparkles.js` (JS, global: `Sparkles`) — tags: sparkles twinkle dots randomized hero aceternity `Sparkles.init('.sparkles', {count, minSize, maxSize, minDuration, maxDuration, color})`. **animated-beam.css** `effects/animated-beam.css` (CSS) — tags: beam connector svg flowing-gradient magic-ui Wrapper + path styles for SVG beam connecting two DOM nodes. **animated-beam.js** `effects/animated-beam.js` (JS, global: `AnimatedBeam`) — tags: beam connector svg curved bezier flowing-gradient multi-beam magic-ui `AnimatedBeam.init('.container', {from, to, curvature, duration, beams: [...]})`. --- ### Effects — Text & images **text-effects.css** `typography/text-effects.css` (CSS) — tags: text gradient outline shadow underline strike highlight Text styling utilities (gradient fill, outlined, shadowed). **text-animations.css** `typography/text-animations.css` (CSS) — tags: text animation type-in glitch wave reveal CSS-only text animations. **text-reveal.js** `effects/text-reveal.js` (JS, global: `TextReveal`) — tags: text split typewriter scramble reveal character `.split()`, `.typewriter()`, `.scramble()` — char-level effects. **text-wave.js** `effects/text-wave.js` (JS, global: `TextWave`) — tags: text wave shimmer scan character-by-character Character-by-character shimmer/scan effect. **text-generate.js** `effects/text-generate.js` (JS, global: `TextGenerate`) — tags: text word-by-word fade-in streaming aceternity reveal Word-by-word fade-in (companion to char-based TextWave). Start modes: auto/inview/manual. **text-ripple.js** `effects/text-ripple.js` (JS, global: `TextRipple`) — tags: text ripple click wave color scale propagation Wave of color+scale across letters from click point. Modes: click/hover. **distortion.js** `effects/distortion.js` (JS, global: `Distortion`) — tags: distortion ripple stretch noise warp `.ripple()`, `.stretch()`, `.noise()`. **parallax.js** `effects/parallax.js` (JS, global: `Parallax`) — tags: parallax scroll layers mouse tilt `.scroll()`, `.layers()`, `.mouse()`, `.tilt()`. **particles.js** `effects/particles.js` (JS, global: `Particles`) — tags: particles canvas connect network points hero Canvas particle system. Presets: network, snow, dust. **image-reveal-mask.css** `effects/image-reveal-mask.css` (CSS) — tags: image reveal mask clip-path entrance codrops bars iris diamond Clip-path image entrance. Variants: up/down/left/right, iris, diamond, bars. **image-reveal-mask.js** `effects/image-reveal-mask.js` (JS, global: `ImageRevealMask`) — tags: image reveal intersection-observer once threshold `ImageRevealMask.init('[data-irm]', {threshold, once, delay})`. **image-distortion-hover.css** `effects/image-distortion-hover.css` (CSS) — tags: image distortion hover svg-filter warp rgb chromatic codrops Companion styles. Variants: soft, strong, rgb. **image-distortion-hover.js** `effects/image-distortion-hover.js` (JS, global: `ImageDistortionHover`) — tags: image distortion svg-filter feTurbulence feDisplacementMap hover codrops `ImageDistortionHover.init('[data-idh]', {baseFrequency, scaleMax})` — injects a shared SVG filter. --- ### Form controls **inputs.css** `blocks/inputs.css` (CSS) — tags: input field float underline gradient glass solid icon button hint error success Baseline input variants: float, underline, gradient, glass, solid. Slots: `.inp-ico/-btn/-eye/-suffix`. **inputs-pro.css** `blocks/inputs-pro.css` (CSS) — tags: input premium aurora neon pill-icon tag chip counter otp search-bar currency segmented 9 premium variants under `.inpx-*`: aurora (conic), neon, pill-icon, tag, counter, otp, search-bar, currency, segmented. **checkboxes.css** `blocks/checkboxes.css` (CSS) — tags: checkbox draw fill pop flip cross animated 5 animated checkbox variants under `.cbx-*`. Colors accent/success/danger/amber, sizes sm/lg/xl, rounded/square. **radios.css** `blocks/radios.css` (CSS) — tags: radio classic fill ring pop slide group card segmented 4 radio variants + sliding `.rdo-group` + `.rdo-card` selectable card. Colors accent/success/danger. **toggles.css** `blocks/toggles.css` (CSS) — tags: toggle switch ios square pill icon soft stretchy vertical 6 toggle variants under `.tgl-*`. Colors accent/cyan/pink/amber, sizes sm/lg/xl. **sliders.css** `blocks/sliders.css` (CSS) — tags: slider range thick thin glow vertical segments range-input Range slider variants with `--sld-progress`. Colors pink/cyan/amber/mint/rose, sizes thick/thin. **sliders.js** `blocks/sliders.js` (JS, global: `Sliders`) — tags: slider range value bubble sync `Sliders.init('[data-sld]', {formatValue, onInput, onChange})` — syncs `--sld-progress` + `.sld-value`. --- ### Layout **grid-systems.css** `layout/grid-systems.css` (CSS) — tags: grid columns 12-col layout responsive CSS grid utility classes. **flexbox-patterns.css** `layout/flexbox-patterns.css` (CSS) — tags: flex flexbox center stack split row column Common flexbox layout patterns. **scroll-snap.css** `layout/scroll-snap.css` (CSS) — tags: scroll snap proximity mandatory section Native CSS scroll-snap utilities. **masonry.css** `layout/masonry.css` (CSS) — tags: masonry pinterest grid columns gallery Masonry/Pinterest-style grid (CSS columns). **container-queries.css** `layout/container-queries.css` (CSS) — tags: container-query responsive component-level @container Container query helpers for component-level responsive design. **sticky-patterns.css** `layout/sticky-patterns.css` (CSS) — tags: sticky header sidebar offset position Sticky header / sidebar patterns. **aspect-ratios.css** `layout/aspect-ratios.css` (CSS) — tags: aspect-ratio 16-9 4-3 1-1 video media Aspect-ratio utility classes for media containers. **fade-masks.css** `layout/fade-masks.css` (CSS) — tags: fade mask edge gradient overlay marquee Edge-fade overlays for marquees/lists (top/bottom/sides). **horizontal-scroll.js** `layout/horizontal-scroll.js` (JS, global: `HorizontalScroll`) — tags: scroll horizontal wheel-hijack Vertical-to-horizontal scroll conversion via wheel hijack. --- ### Loaders & indicators **loaders.css** `blocks/loaders.css` (CSS) — tags: loader spinner progress skeleton bar top Baseline loaders (spinner, skeleton, progress, top-bar). **loaders.js** `blocks/loaders.js` (JS, global: `Loaders`) — tags: loader skeleton progress top-bar `.skeleton()`, `.progress()`, `.topBar()`. **loaders-pack.css** `blocks/loaders-pack.css` (CSS) — tags: loader pack dots bounce pulse fade snake bars eq spinner conic dual orbit cube fold flip pacman heart ripple blob 18 loader variants under `.ldr-*`. Color/size modifiers: ldr-accent/cyan/pink/mint/amber/mono · ldr-sm/lg/xl. --- ### Marquee / Ticker (cross-referenced — also under Components) (See `components/marquee.*` and `components/marquee-3d.css` above.) --- ### Media (image / video) **image-compare.css** `media/image-compare.css` (CSS) — tags: image-compare before-after slider drag split handle Before/after slider. Variants: vertical, thin, no-handle. **image-compare.js** `media/image-compare.js` (JS, global: `ImageCompare`) — tags: image-compare before-after drag axis keyboard `ImageCompare.init('[data-ic]', {start, axis, hoverPreview})` — supports keyboard arrows. **video-hover-preview.css** `media/video-hover-preview.css` (CSS) — tags: video hover preview tile poster autoplay zoom dim Tile that autoplays a video on hover. Variants: rounded, zoom, dim. **video-hover-preview.js** `media/video-hover-preview.js` (JS, global: `VideoHoverPreview`) — tags: video hover preview autoplay lazy debounce `VideoHoverPreview.init('[data-vhp]', {muted, loop, startDelay})` — lazy-injects `