vue3-bits

Vue 3 动画组件库，以 Vue 3 重新实现常见交互与视觉效果。 A Vue 3 animation component library that re-implements common interactions and visual effects in Vue 3.

说明：本项目所有组件均为独立重新实现，遵循各自开源许可。 Note: every component here is an independent re-implementation under its own open-source license.

链接 / Links

• 在线演示 / Demo：https://lvminjie5201314.github.io/music/vue3-bits

快速开始 / Quick Start

npm install vue3-bits

⚠️ 必须引入样式 / Import the stylesheet once: 组件样式统一构建到 dist/style.css，通过 vue3-bits/style.css 子路径引入一次即可（包已配置该导出，无需在 vite.config 配 alias），否则样式不生效。 ⚠️ You must import the stylesheet once: all component styles are bundled into dist/style.css. Import vue3-bits/style.css once (the package exports this subpath, no vite.config alias needed), otherwise styles will not apply.

import { createApp } from 'vue'
import App from './App.vue'
import 'vue3-bits/style.css' // ← 必须引入 / required（无需在 vite.config 配 alias）

createApp(App).mount('#app')

组件教程 / Component Tutorial

共 82 个组件，按分类组织如下。 82 components in total, grouped by category below.

复制说明 / Copy note：GitHub 与 Gitee 会在每个代码块右上角提供原生“复制”按钮；在线演示页也提供交互式复制——这已满足“复制按钮”需求。 Copy note: both GitHub and Gitee render a native "Copy" button at the top-right of every code block, and the live demo page offers interactive copying — this already fulfills the "copy button" requirement.

3D

• ModelViewer
• CircularGallery
• FluidGlass
• Cubes
• ProfileCard
• Carousel

Background

• Lightfall
• LiquidEther
• FloatingLines
• LightRays
• LineWaves
• Radar
• SoftAurora
• Plasma
• Particles
• GradientBlinds
• GridScan
• Lightning
• Galaxy
• DotField
• DotGrid
• Hyperspeed
• Waves
• Ballpit
• Orb
• ShapeGrid
• GridDistortion
• CursorGrid
• OrbitImages
• Antigravity
• LogoLoop
• ShapeBlur
• ImageTrail
• Ribbons
• MetaBalls
• FlyingPosters

Interaction

• SpotlightCard
• BorderGlow
• Dock
• ScrollStack
• MagicBento
• Stepper
• InfiniteMenu
• Counter
• ElasticSlider
• DecayCard
• GlassIcons
• PixelCard
• GooeyNav
• ChromaGrid
• DomeGallery
• GlassSurface
• TiltedCard
• PillNav
• Stack
• CardNav
• ElectricBorder
• PixelTransition
• TargetCursor
• MagicRings
• ClickSpark
• Crosshair
• SplashCursor
• BlobCursor
• SpecularButton
• OptionWheel
• StaggeredMenu

Text

• AnimatedList
• TextType
• ShinyText
• CurvedLoop
• FuzzyText
• GradientText
• LineSidebar
• TextPressure
• DecryptedText
• TrueFocus
• ScrollReveal
• ScrollVelocity
• VariableProximity
• GradualBlur
• StarBorder

3D

ModelViewer

TresJS 模型查看器

引入 / Import

import { ModelViewer } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | url | string | — | Model URL (required). Supports .glb / .gltf / .fbx / .obj. | | width | number | string | 400 | Canvas width. Number is treated as px. | | height | number | string | 400 | Canvas height. Number is treated as px. | | modelXOffset | number | 0 | Billboard horizontal offset in NDC space. | | modelYOffset | number | 0 | Billboard vertical offset in NDC space. | | defaultRotationX | number | -50 | Initial rotation around X axis, in degrees. | | defaultRotationY | number | 20 | Initial rotation around Y axis, in degrees. | | defaultZoom | number | 0.5 | Initial camera Z distance. | | minZoomDistance | number | 0.5 | Minimum zoom distance (OrbitControls / pinch). | | maxZoomDistance | number | 10 | Maximum zoom distance (OrbitControls / pinch). | | enableMouseParallax | boolean | true | Enable mouse parallax (non-touch only). | | enableManualRotation | boolean | true | Enable drag-to-rotate. | | enableHoverRotation | boolean | true | Enable hover rotation (non-touch only). | | enableManualZoom | boolean | true | Enable manual zoom (OrbitControls / pinch). | | ambientIntensity | number | 0.3 | Ambient light intensity. | | keyLightIntensity | number | 1 | Key (top-right) directional light intensity. | | fillLightIntensity | number | 0.5 | Fill (left) directional light intensity. | | rimLightIntensity | number | 0.8 | Rim (back) directional light intensity. | | environmentPreset | EnvironmentPreset | 'forest' | Environment preset. 'none' disables it. | | autoFrame | boolean | false | Automatically frame the model by computing camera distance from fov. | | placeholderSrc | string | '' | Image shown (blurred) while loading. | | showScreenshotButton | boolean | true | Show the screenshot button. | | fadeIn | boolean | false | Fade material opacity from 0 to 1 on load. | | autoRotate | boolean | false | Continuously auto-rotate the model. | | autoRotateSpeed | number | 0.35 | Auto-rotate speed in radians per second. | | onModelLoaded | () => void | — | Callback fired once the model is loaded & normalized. |

使用示例 / Usage

<script setup lang="ts">
import { ref } from 'vue'
import { ModelViewer } from 'vue3-bits'

const url =
  'https://.../ToyCar.glb'
</script>

<template>
  <ModelViewer
    :url="url"
    :width="480"
    :height="480"
    environment-preset="forest"
    :auto-rotate="true"
    :enable-mouse-parallax="true"
    :fade-in="true"
    :show-screenshot-button="true"
  />
</template>

CircularGallery

ogl 环形画廊

引入 / Import

import { CircularGallery } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | GalleryItem[] | — | Gallery items. Falls back to a built-in default set when omitted. | | bend | number | 3 | Curvature amount (0 = flat). | | textColor | string | '#ffffff' | Caption / label color. | | borderRadius | number | 0.05 | Corner radius of each plane (0..1 in the original units). | | font | string | 'bold 30px Figtree' | Canvas font string, e.g. 'bold 30px Figtree'. | | fontUrl | string | — | Optional font stylesheet or file URL loaded on demand. | | scrollSpeed | number | 2 | Scroll sensitivity. | | scrollEase | number | 0.05 | Scroll easing factor (0..1). | | cardBackgroundColor | string | '#2e3350' | Placeholder card background color shown before/while images load. |

使用示例 / Usage

<script setup lang="ts">
import { CircularGallery } from 'vue3-bits'
</script>

<template>
  <div style="height: 420px">
    <CircularGallery
      :items="[{ image: '/a.jpg', text: 'A' }]"
      :bend="3"
      :scroll-speed="4"
    />
  </div>
</template>

FluidGlass

TresJS 流体玻璃

引入 / Import

import { FluidGlass } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | mode | FluidGlassMode | 'lens' | Which glass geometry / behaviour to render. Default 'lens'. | | lensProps | FluidGlassModeProps | — | Overrides applied in lens mode. | | barProps | FluidGlassModeProps | — | Overrides applied in bar mode (also carries navItems). | | cubeProps | FluidGlassModeProps | — | Overrides applied in cube mode. | | className | string | '' | Class applied to the root wrapper. | | width | number | string | 400 | Canvas width. A number is treated as px. Default 400. | | height | number | string | 400 | Canvas height. A number is treated as px. Default 400. |

使用示例 / Usage

<script setup lang="ts">
import { FluidGlass } from 'vue3-bits'
</script>

<template>
  <div style="height: 400px; position: relative">
    <FluidGlass
      mode="lens"
      :lens-props="{ scale: 0.25, ior: 1.15, thickness: 5, chromaticAberration: 0.1, anisotropy: 0.01 }"
    />
  </div>
</template>

Cubes

3D 立方体网格

引入 / Import

import { Cubes } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | gridSize | number | 10 | Number of cubes per row/column — the grid is gridSize × gridSize. | | cubeSize | number | — | Fixed cube size in px. When omitted (default) the grid stretches to fill its container (1fr tracks); when set, both ro… | | maxAngle | number | 45 | Maximum tilt angle (degrees) applied at the centre of the influence. | | radius | number | 3 | Influence radius (in grid cells) of the pointer / sim. Cubes within this distance tilt; the further out, the smaller the… | | easing | string | 'power3.out' | gsap ease string for the tilt-in tween (e.g. 'power3.out'). | | duration | Duration | — | Enter / leave tilt durations (seconds). | | cellGap | number | Gap | — | Gap between cells: a single number (both axes) or a {row,col} object (px). | | borderStyle | string | '1px solid #fff' | CSS border value applied to every cube face. | | faceColor | string | '#120F17' | Background color of every cube face. | | shadow | boolean | string | false | Box-shadow on each cube: false (none), true (default shadow) or a CSS string. | | autoAnimate | boolean | true | Run the idle auto-animation path when the pointer is inactive. | | rippleOnClick | boolean | true | Fire an expanding color ripple from the clicked cell. | | rippleColor | string | '#fff' | Color of the click ripple. | | rippleSpeed | number | 2 | Ripple speed multiplier (higher = faster spread). | | className | string | '' | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline style object merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { Cubes } from 'vue3-bits'
</script>

<template>
  <div style="height: 600px; position: relative">
    <Cubes
      :grid-size="10"
      :max-angle="45"
      :radius="3"
      border-style="2px dashed #B497CF"
      face-color="#1a1a2e"
      ripple-color="#ff6b6b"
      :ripple-speed="1.5"
      auto-animate
      ripple-on-click
    />
  </div>
</template>

ProfileCard

3D 倾斜名片

引入 / Import

import { ProfileCard } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | avatarUrl | string | '' | Avatar image (any URL, but a data:image/svg+xml,... URI keeps it offline). | | iconUrl | string | — | Decorative "icon pattern" used as a luminance mask over the holo sheen. | | grainUrl | string | — | Optional film-grain texture layered into the holo effect. | | innerGradient | string | — | CSS background applied to the card interior behind the avatar. | | behindGlowEnabled | boolean | true | Render the radial glow that sits behind the card. | | behindGlowColor | string | — | Color of the behind glow (any CSS color). | | behindGlowSize | string | — | Radius/extent of the behind glow (e.g. 50%). | | className | string | '' | Extra CSS class appended to the root wrapper. | | enableTilt | boolean | true | Enable the pointer-driven 3D tilt. | | enableMobileTilt | boolean | false | On touch devices, request device-orientation permission to drive the tilt. | | mobileTiltSensitivity | number | 5 | How strongly device tilt maps to pointer offset on mobile. | | miniAvatarUrl | string | — | Smaller avatar shown in the contact bar (falls back to avatarUrl). | | name | string | 'Javi A. Torres' | Display name. | | title | string | 'Software Engineer' | Subtitle / role. | | handle | string | 'javicodes' | Social handle (rendered as @handle). | | status | string | 'Online' | Status pill text (e.g. Online). | | contactText | string | 'Contact' | Contact button label. | | showUserInfo | boolean | true | Show the bottom contact bar with mini-avatar + handle + status. | | onContactClick | () => void | — | Called when the contact button is clicked. |

使用示例 / Usage

<script setup lang="ts">
import ProfileCard from 'vue3-bits'
</script>

<template>
  <ProfileCard
    :avatar-url="avatarDataUri"
    name="Javi A. Torres"
    title="Software Engineer"
    handle="javicodes"
    status="Online"
    contact-text="Contact Me"
    :show-user-info="true"
    :enable-tilt="true"
    :behind-glow-enabled="true"
    behind-glow-color="rgba(125, 190, 255, 0.67)"
    @contact-click="() => console.log('Contact clicked')"
  />
</template>

Carousel

CSS 3D 透视轮播

引入 / Import

import { Carousel } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | CarouselItem[] | — | Cards to display. Defaults to the 5-item sample. | | baseWidth | number | 300 | Width (px) of the carousel viewport; the card width derives from it. | | autoplay | boolean | false | Advance to the next card automatically on a timer. | | autoplayDelay | number | 3000 | Autoplay interval in ms. | | pauseOnHover | boolean | false | Pause the autoplay timer while the pointer is over the carousel. | | loop | boolean | false | Infinite loop — clones the first/last cards and wraps seamlessly. | | round | boolean | false | Circular "round" variant (square cards + round container). | | className | string | '' | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { Carousel } from 'vue3-bits'
</script>

<template>
  <div style="height: 420px; position: relative">
    <Carousel
      :base-width="340"
      autoplay
      :autoplay-delay="3000"
      :pause-on-hover="false"
      :loop="false"
      :round="false"
    />
  </div>
</template>

Background

Lightfall

ogl 光束背景

引入 / Import

import { Lightfall } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | colors | string[] | — | Streak palette colors as hex strings. Defaults to the gradient. | | color1 | string | — | Individual streak colors. When all three (color1 + color2 + color3) are provided they take precedence over colors… | | color2 | string | — | See color1. | | color3 | string | — | See color1. | | backgroundColor | string | '#0A29FF' | Background color as a hex string. | | speed | number | 0.5 | Animation speed multiplier. | | streakCount | number | 2 | Number of light streaks (clamped to 1..16 at runtime). | | streakWidth | number | 1 | Streak width. | | streakLength | number | 1 | Streak length. | | glow | number | 1 | Glow intensity. | | density | number | 0.6 | Streak density, 0..1. | | twinkle | number | 1 | Twinkle amount. | | zoom | number | 3 | Zoom level. | | backgroundGlow | number | 0.5 | Background glow amount. | | opacity | number | 1 | Overall opacity, 0..1. | | mouseInteraction | boolean | true | Enable mouse interaction. | | mouseStrength | number | 0.5 | Mouse interaction strength. | | mouseRadius | number | 1 | Mouse interaction radius. | | mouseDampening | number | 0.15 | Mouse position dampening factor; 0disables damping. | | dpr | number | — | Device pixel ratio override.undefined→window.devicePixelRatio. | | paused | boolean | false | Pause the animation loop. | | className | string | — | Extra CSS class applied to the container element. | | mixBlendMode | string | — | CSS mix-blend-mode` value applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Lightfall } from 'vue3-bits'
</script>

<template>
  <!-- wrap in a sized element; the canvas fills its parent -->
  <div style="position: relative; height: 460px">
    <Lightfall
      color1="#A6C8FF"
      color2="#5227FF"
      color3="#FF9FFC"
      background-color="#0A29FF"
      :speed="0.5"
      :streak-count="2"
      :streak-width="1"
      :streak-length="1"
      :glow="1"
      :density="0.6"
      :twinkle="1"
      :zoom="3"
      :background-glow="0.5"
      :opacity="1"
      :mouse-interaction="true"
      :mouse-strength="0.5"
      :mouse-radius="1"
    />
  </div>
</template>

LiquidEther

WebGL Navier-Stokes 流体模拟背景

引入 / Import

import { LiquidEther } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | mouseForce | number | 20 | Strength of the force injected by the pointer / auto driver. | | cursorSize | number | 100 | Radius (in simulation cells) of the injected force brush. | | isViscous | boolean | false | Enable the viscous (diffusion) solve. | | viscous | number | 30 | Viscosity coefficient used when isViscous is true. | | iterationsViscous | number | 32 | Jacobi iterations for the viscous solve. | | iterationsPoisson | number | 32 | Jacobi iterations for the pressure (Poisson) solve. | | dt | number | 0.014 | Simulation time step. | | BFECC | boolean | true | Use BFECC advection (higher quality) instead of plain semi-Lagrangian. | | resolution | number | 0.5 | Simulation resolution as a fraction of the container size (0..1). | | isBounce | boolean | false | Bounce velocity at the boundary instead of a free-slip wall. | | colors | string[] | — | Palette colours (hex strings) mapped to the velocity magnitude. | | className | string | '' | Extra class applied to the root container (does not override base class). | | autoDemo | boolean | true | Run the autonomous mouse-driver demo when the user is idle. | | autoSpeed | number | 0.5 | Speed of the auto driver. | | autoIntensity | number | 2.2 | Multiplier applied to the auto driver's pointer delta. | | takeoverDuration | number | 0.25 | Seconds the auto driver spends taking over from the user's pointer. | | autoResumeDelay | number | 1000 | Idle milliseconds before the auto driver resumes. | | autoRampDuration | number | 0.6 | Ramp-up duration (seconds) of the auto driver after resume. |

使用示例 / Usage

<script setup lang="ts">
import { LiquidEther } from 'vue3-bits'
</script>

<template>
  <!-- wrap in a sized element; the canvas fills its parent -->
  <div style="position: relative; height: 340px">
    <LiquidEther
      :colors="['#5227FF', '#FF9FFC', '#B497CF']"
      :mouse-force="20"
      :cursor-size="100"
      :viscous="30"
      :auto-speed="0.5"
      :auto-intensity="2.2"
    />
  </div>
</template>

FloatingLines

全屏着色器浮动线条背景

引入 / Import

import { FloatingLines } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | linesGradient | string[] | — | Gradient stops (max 8) applied along each line. Missing → background shading. | | enabledWaves | Array<'top' | 'middle' | 'bottom'> | — | Which waves render. Default ['top', 'middle', 'bottom']. | | lineCount | number | number[] | — | Lines per wave: number (all) or per-wave array indexed by enabledWaves. | | lineDistance | number | number[] | — | Distance between lines: number (all) or per-wave array. ×0.01 in shader. | | topWavePosition | WavePosition | — | Position of the top wave. Default { x: 10, y: 0.5, rotate: -0.4 }. | | middleWavePosition | WavePosition | — | Position of the middle wave. Default { x: 5, y: 0, rotate: 0.2 }. | | bottomWavePosition | WavePosition | — | Position of the bottom wave. Default { x: 2.0, y: -0.7, rotate: -1 }. | | animationSpeed | number | 1 | Animation time multiplier. Default 1. | | interactive | boolean | true | Enable mouse bending interaction. Default true. | | bendRadius | number | 5.0 | Radial falloff around the cursor for the bend effect. Default 5.0. | | bendStrength | number | -0.5 | Bend strength. Default -0.5. | | mouseDamping | number | 0.05 | Mouse / parallax easing factor. Default 0.05. | | parallax | boolean | true | Enable parallax offset that follows the cursor. Default true. | | parallaxStrength | number | 0.2 | Parallax strength. Default 0.2. | | mixBlendMode | string | 'screen' | CSS mix-blend-mode applied to the container. Default 'screen'. | | className | string | '' | Extra CSS class applied to the root container (passed through). |

使用示例 / Usage

<script setup lang="ts">
import { FloatingLines } from 'vue3-bits'
</script>

<template>
  <div style="width: 100%; height: 600px; position: relative">
    <FloatingLines
      :line-count="8"
      :line-distance="8"
      :bend-radius="8"
      :bend-strength="-2"
      interactive
      :parallax="true"
      :animation-speed="1"
    />
  </div>
</template>

LightRays

ogl 光束背景

引入 / Import

import { LightRays } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | raysOrigin | RaysOrigin | — | Where the rays originate from (see {@link RaysOrigin}). | | raysColor | string | — | Ray color as a #rgb / #rrggbb hex string. | | raysSpeed | number | — | Animation speed multiplier. | | lightSpread | number | — | Angular spread of the rays (higher = tighter cone). | | rayLength | number | — | Ray length multiplier. | | pulsating | boolean | — | Whether the brightness pulses over time. | | fadeDistance | number | — | Distance (in fraction of width) before the rays fade out. | | saturation | number | — | Color saturation; 1 leaves colors unchanged. | | followMouse | boolean | — | Whether the rays bend toward the mouse. | | mouseInfluence | number | — | How strongly the mouse bends the rays (0..1). | | noiseAmount | number | — | Amount of noise applied to the rays. | | distortion | number | — | Distortion wobble applied to the ray angle. | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { LightRays } from 'vue3-bits'
</script>

<template>
  <!-- wrap in a sized element; the canvas fills its parent -->
  <div style="position: relative; height: 340px">
    <LightRays
      rays-origin="top-center"
      rays-color="#ffffff"
      :rays-speed="1"
      :light-spread="1"
      :ray-length="2"
      :follow-mouse="true"
      :mouse-influence="0.1"
    />
  </div>
</template>

LineWaves

ogl 波浪线背景

引入 / Import

import { LineWaves } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | speed | number | — | Animation speed multiplier. | | innerLineCount | number | — | Number of lines drawn near the inner (vertical-centre) region. | | outerLineCount | number | — | Number of lines drawn near the outer regions. | | warpIntensity | number | — | How strongly the field is warped by the noise displacement. | | rotation | number | — | Field rotation in degrees. | | edgeFadeWidth | number | — | Width of the soft top/bottom edge fade (0 = no fade). | | colorCycleSpeed | number | — | Speed at which the gradient cycles through colors. | | brightness | number | — | Overall brightness of the rendered lines. | | color1 | string | — | First gradient / line color (hex). | | color2 | string | — | Second gradient / line color (hex). | | color3 | string | — | Third gradient / line color (hex). | | enableMouseInteraction | boolean | — | Whether the field bends toward the pointer. | | mouseInfluence | number | — | Strength of the pointer warp. |

使用示例 / Usage

<script setup lang="ts">
import { LineWaves } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <LineWaves
      :speed="0.3"
      :inner-line-count="32"
      :outer-line-count="36"
      :warp-intensity="1"
      :rotation="-45"
      :color1="'#ffffff'"
      :color2="'#ffffff'"
      :color3="'#ffffff'"
    />
  </div>
</template>

Radar

ogl 雷达扫描背景

引入 / Import

import { Radar } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | speed | number | — | Animation speed multiplier. | | scale | number | — | Scale of the radar field (smaller = zoomed in). | | ringCount | number | — | Number of concentric rings. | | spokeCount | number | — | Number of radial spokes. | | ringThickness | number | — | Thickness of each ring. | | spokeThickness | number | — | Thickness of each spoke. | | sweepSpeed | number | — | Angular speed of the sweeping beam. | | sweepWidth | number | — | Width of the sweep beam lobe. | | sweepLobes | number | — | Number of sweep lobes. | | color | string | — | Primary color of the radar (hex). | | backgroundColor | string | — | Background color (hex). | | falloff | number | — | Edge falloff exponent. | | brightness | number | — | Overall brightness. | | enableMouseInteraction | boolean | — | Whether the field shifts toward the pointer. | | mouseInfluence | number | — | Strength of the pointer shift. |

使用示例 / Usage

<script setup lang="ts">
import { Radar } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <Radar
      :speed="1"
      :scale="0.5"
      :ring-count="10"
      :spoke-count="10"
      color="#9f29ff"
      background-color="#000000"
    />
  </div>
</template>

SoftAurora

ogl 极光着色器背景

引入 / Import

import { SoftAurora } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | speed | number | — | Animation speed multiplier. | | scale | number | — | Scale of the noise sampling field. | | brightness | number | — | Overall brightness. | | color1 | string | — | First aurora color (hex). | | color2 | string | — | Second aurora color (hex). | | noiseFrequency | number | — | Frequency of the Perlin noise sampling. | | noiseAmplitude | number | — | Amplitude of the Perlin noise sampling. | | bandHeight | number | — | Vertical position of the aurora band (0..1). | | bandSpread | number | — | Spread / sharpness of the aurora band. | | octaveDecay | number | — | Per-octave amplitude decay (fractal noise). | | layerOffset | number | — | Phase offset of the second aurora layer. | | colorSpeed | number | — | Speed at which the color gradient scrolls. | | enableMouseInteraction | boolean | — | Whether the field shifts toward the pointer. | | mouseInfluence | number | — | Strength of the pointer shift. |

使用示例 / Usage

<script setup lang="ts">
import { SoftAurora } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <SoftAurora
      :speed="0.6"
      :scale="1.5"
      color1="#f7f7f7"
      color2="#e100ff"
    />
  </div>
</template>

Plasma

ogl 等离子着色器背景

引入 / Import

import { Plasma } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | color | string | — | Tint color applied to the plasma (hex). | | speed | number | — | Animation speed multiplier. | | direction | PlasmaDirection | — | Flow direction: forward / reverse / pingpong. | | scale | number | — | Zoom / scale of the plasma field. | | opacity | number | — | Output opacity. | | mouseInteractive | boolean | — | Whether the field reacts to the pointer. |

使用示例 / Usage

<script setup lang="ts">
import { Plasma } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <Plasma
      color="#ffffff"
      :speed="1"
      direction="forward"
      :scale="1"
      :opacity="1"
    />
  </div>
</template>

Particles

ogl 粒子背景

引入 / Import

import { Particles } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | particleCount | number | — | Number of particles. | | particleSpread | number | — | Spread multiplier of the unit-sphere positions. | | speed | number | — | Animation speed. | | particleColors | string[] | — | Palette of particle colors (hex strings). Falls back to white. | | moveParticlesOnHover | boolean | — | Whether particles drift toward the pointer on hover. | | particleHoverFactor | number | — | How far the whole system shifts on pointer move. | | alphaParticles | boolean | — | Use soft alpha (circular) particles instead of hard squares. | | particleBaseSize | number | — | Base point size. | | sizeRandomness | number | — | Per-particle size jitter (0 = uniform). | | cameraDistance | number | — | Distance of the camera along Z. | | disableRotation | boolean | — | Disable the idle rotation of the whole cloud. | | pixelRatio | number | — | Device pixel ratio used by the renderer. | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Particles } from 'vue3-bits'
</script>

<template>
  <!-- wrap in a sized element; the canvas fills its parent -->
  <div style="position: relative; height: 340px">
    <Particles
      :particle-count="200"
      :particle-spread="10"
      :speed="0.1"
      :particle-base-size="100"
      :alpha-particles="false"
      :disable-rotation="false"
      :pixel-ratio="1"
    />
  </div>
</template>

GradientBlinds

ogl 渐变百叶背景

引入 / Import

import { GradientBlinds } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | — | Extra CSS class applied to the container element. | | dpr | number | — | Device pixel ratio (falls back to window.devicePixelRatio). | | paused | boolean | — | Freeze the animation (the last rendered frame stays on screen). | | gradientColors | string[] | — | Gradient colour stops (hex strings); 1..8 entries, padded/truncated to 8. | | angle | number | — | Gradient rotation in degrees. | | noise | number | — | Amount of per-pixel noise added to the output. | | blindCount | number | — | Number of blinds (capped by blindMinWidth when that would make them wider). | | blindMinWidth | number | — | Minimum blind width in px; caps blindCount so blinds stay at least this wide. | | mouseDampening | number | — | Pointer-follow smoothing time constant (0 = instant follow). | | mirrorGradient | boolean | — | Mirror the gradient across the vertical centre. | | spotlightRadius | number | — | Radius of the soft spotlight that follows the pointer (fraction of size). | | spotlightSoftness | number | — | Softness exponent of the spotlight falloff. | | spotlightOpacity | number | — | Opacity of the spotlight highlight. | | distortAmount | number | — | Amount of UV distortion wobble. | | shineDirection | ShineDirection | — | Which side the blind stripes are lit from. | | mixBlendMode | string | — | CSS mix-blend-mode applied to the container. |

使用示例 / Usage

<script setup lang="ts">
import { GradientBlinds } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 600px">
    <GradientBlinds
      :gradient-colors="['#FF9FFC', '#5227FF']"
      :angle="20"
      :noise="0.5"
      :blind-count="16"
      :spotlight-radius="0.5"
      :shine-direction="'left'"
      mix-blend-mode="lighten"
    />
  </div>
</template>

GridScan

three 网格扫描背景

引入 / Import

import { GridScan } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | enableWebcam | boolean | — | Enable webcam face tracking (dropped in this port — no face-api dep). | | showPreview | boolean | — | Show the (unused) webcam preview overlay. | | modelsPath | string | — | face-api model path (ignored in this port). | | sensitivity | number | — | Pointer responsiveness (0..1). | | lineThickness | number | — | Grid line thickness. | | linesColor | string | — | Grid line color (hex). | | gridScale | number | — | Grid scale (cell size). | | lineStyle | GridScanLineStyle | — | Line style. | | lineJitter | number | — | Per-line jitter amount (0..1). | | enablePost | boolean | — | Enable the three-native post chain (bloom + chromatic aberration). | | bloomIntensity | number | — | Bloom strength. | | bloomThreshold | number | — | Bloom luminance threshold. | | bloomSmoothing | number | — | Bloom luminance smoothing. | | chromaticAberration | number | — | Chromatic aberration offset. | | noiseIntensity | number | — | Noise amount applied to the grid. | | scanColor | string | — | Scan pulse color (hex). | | scanOpacity | number | — | Scan pulse opacity. | | scanDirection | GridScanScanDirection | — | Scan direction. | | scanSoftness | number | — | Scan softness. | | scanGlow | number | — | Scan glow. | | scanPhaseTaper | number | — | Scan phase taper. | | scanDuration | number | — | Scan cycle duration (s). | | scanDelay | number | — | Scan delay before each cycle (s). | | enableGyro | boolean | — | Enable gyroscope (device orientation) input. | | scanOnClick | boolean | — | Push a scan pulse on click. | | snapBackDelay | number | — | Delay (ms) before the camera snaps back to center on pointer leave. | | className | string | — | Extra CSS class applied to the container element. | | style | Record<string, string> | — | Inline style object (mirrors the style prop). |

使用示例 / Usage

<script setup lang="ts">
import { GridScan } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 600px">
    <GridScan
      :sensitivity="0.55"
      :line-thickness="1"
      :grid-scale="0.1"
      :line-style="'solid'"
      :scan-color="'#FF9FFC'"
      :scan-opacity="0.4"
      :scan-direction="'pingpong'"
      :enable-post="true"
    />
  </div>
</template>

Lightning

原生 WebGL 闪电背景

引入 / Import

import { Lightning } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | hue | number | — | Base color hue of the beam, in degrees (0–360). | | xOffset | number | — | Horizontal offset applied to the beam field. | | speed | number | — | Animation speed multiplier. | | intensity | number | — | Brightness / glow intensity of the beam. | | size | number | — | Noise distortion size of the beam field. | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Lightning } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 600px">
    <Lightning
      :hue="230"
      :x-offset="0"
      :speed="1"
      :intensity="1"
      :size="1"
    />
  </div>
</template>

Galaxy

ogl 星系背景

引入 / Import

import { Galaxy } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | focal | [number, number] | — | Focal point of the projection, in [x, y] normalized coords. | | rotation | [number, number] | — | Rotation applied to the UVs, in [x, y]. | | starSpeed | number | — | Star flow speed. | | density | number | — | Star field density. | | hueShift | number | — | Hue shift in degrees. | | disableAnimation | boolean | — | Freeze the animation. | | speed | number | — | Overall animation speed. | | mouseInteraction | boolean | — | Enable mouse interaction (move / leave listeners). | | glowIntensity | number | — | Glow intensity of the stars. | | saturation | number | — | Color saturation. | | mouseRepulsion | boolean | — | Whether stars are repelled by the mouse. | | twinkleIntensity | number | — | Twinkle intensity. | | rotationSpeed | number | — | Idle auto-rotation speed. | | repulsionStrength | number | — | Strength of the mouse repulsion. | | autoCenterRepulsion | number | — | Constant repulsion from the center (0 = off). | | transparent | boolean | — | Transparent background (alpha) vs. opaque black. | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Galaxy } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <Galaxy
      :mouse-repulsion="true"
      :mouse-interaction="true"
      :density="1"
      :glow-intensity="0.3"
      :saturation="0"
      :hue-shift="140"
      :twinkle-intensity="0.3"
      :rotation-speed="0.1"
      :repulsion-strength="2"
      :auto-center-repulsion="0"
      :star-speed="0.5"
      :speed="1"
    />
  </div>
</template>

DotField

Canvas 点阵背景

引入 / Import

import { DotField } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | dotRadius | number | — | Radius of each dot in px. | | dotSpacing | number | — | Spacing between dots in px. | | cursorRadius | number | — | Radius (px) of the cursor influence field. | | cursorForce | number | — | How strongly the cursor pushes dots when not in bulge-only mode. | | bulgeOnly | boolean | — | When true dots only bulge toward the cursor; otherwise they drift. | | bulgeStrength | number | — | Strength of the bulge displacement. | | glowRadius | number | — | Radius of the soft SVG glow that follows the pointer. | | sparkle | boolean | — | Randomly enlarge a few dots each frame for a sparkle effect. | | waveAmplitude | number | — | Amplitude of the idle sine-wave drift (0 = none). | | gradientFrom | string | — | Gradient start color for the dot field. | | gradientTo | string | — | Gradient end color for the dot field. | | glowColor | string | — | Color of the radial cursor glow. | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { DotField } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; width: 100%; height: 600px">
    <DotField
      :dot-radius="1.5"
      :dot-spacing="14"
      :bulge-strength="67"
      :glow-radius="160"
      :cursor-radius="500"
      :cursor-force="0.1"
      bulge-only
      gradient-from="#A855F7"
      gradient-to="#B497CF"
      glow-color="#120F17"
    />
  </div>
</template>

DotGrid

Canvas 点阵网格

引入 / Import

import { DotGrid } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | dotSize | number | — | Diameter of each dot in px. | | gap | number | — | Gap between dots in px. | | baseColor | string | — | Resting dot color (hex). | | activeColor | string | — | Color of dots near the pointer (hex). | | proximity | number | — | Distance (px) within which dots light up near the pointer. | | speedTrigger | number | — | Pointer speed (px/s) required to trigger an inertia push. | | shockRadius | number | — | Radius (px) of the click shockwave. | | shockStrength | number | — | Strength of the click shockwave push. | | maxSpeed | number | — | Maximum pointer speed (px/s) clamp. | | resistance | number | — | Inertia resistance proxy (higher = snappier push). | | returnDuration | number | — | Duration (s) of the elastic return to rest. | | className | string | — | Extra CSS class applied to the root element. | | style | Record<string, string> | — | Inline style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { DotGrid } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; width: 100%; height: 600px">
    <DotGrid
      :dot-size="5"
      :gap="15"
      base-color="#2F293A"
      active-color="#5227FF"
      :proximity="120"
      :shock-radius="250"
      :shock-strength="5"
      :resistance="750"
      :return-duration="1.5"
    />
  </div>
</template>

Hyperspeed

three 超光速隧道背景

引入 / Import

import { Hyperspeed } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | effectOptions | Partial<HyperspeedOptions> | — | Partial override of the engine options (merged onto defaults). | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Hyperspeed } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 600px">
    <Hyperspeed
      :effect-options="{
        distortion: 'turbulentDistortion',
        length: 400,
        roadWidth: 10,
        lanesPerRoad: 4,
        speedUp: 2,
        colors: {
          roadColor: 0x080808,
          islandColor: 0x0a0a0a,
          background: 0x000000,
          shoulderLines: 0xffffff,
          brokenLines: 0xffffff,
          leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
          rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
          sticks: 0x03b3c3
        }
      }"
    />
  </div>
</template>

Waves

Canvas 波浪背景

引入 / Import

import { Waves } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | lineColor | string | — | Stroke color of the wave lines. | | backgroundColor | string | — | Canvas background color (any CSS color). | | waveSpeedX | number | — | Horizontal noise scroll speed. | | waveSpeedY | number | — | Vertical noise scroll speed. | | waveAmpX | number | — | Horizontal wave amplitude. | | waveAmpY | number | — | Vertical wave amplitude. | | xGap | number | — | Horizontal gap between lines. | | yGap | number | — | Vertical gap between points. | | friction | number | — | Cursor velocity friction (0..1). | | tension | number | — | Spring tension pulling points back to rest. | | maxCursorMove | number | — | Max cursor displacement (px). | | className | string | — | Extra CSS class applied to the root element. | | style | Record<string, string> | — | Inline style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { Waves } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; width: 100%; height: 600px">
    <Waves
      line-color="#ffffff"
      :wave-speed-x="0.0125"
      :wave-speed-y="0.01"
      :wave-amp-x="40"
      :wave-amp-y="20"
      :friction="0.9"
      :tension="0.01"
      :max-cursor-move="120"
      :x-gap="12"
      :y-gap="36"
    />
  </div>
</template>

Ballpit

ogl 弹球背景

引入 / Import

import { Ballpit } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | — | Extra CSS class applied to the canvas. | | followCursor | boolean | — | Whether the first sphere tracks the pointer (default: true). | | count | number | — | Number of balls. | | gravity | number | — | Downward acceleration per second. | | friction | number | — | Velocity retained per frame (0..1, closer to 1 = less drag). | | wallBounce | number | — | Energy kept after a wall hit. | | ambientColor | number | — | Ambient light color (hex int). | | ambientIntensity | number | — | Ambient light intensity. | | lightIntensity | number | — | Point light intensity. | | colors | number[] | — | Palette of ball colors (hex ints). | | maxX | number | — | Bounds of the simulation box (X/Y/Z half-extents). | | maxY | number | — | — | | maxZ | number | — | — | | minSize | number | — | Min / max per-ball radius. | | maxSize | number | — | — | | size0 | number | — | Radius of the controlled (index 0) sphere. | | maxVelocity | number | — | Velocity clamp. | | materialParams | Record<string, unknown> | — | MeshPhysicalMaterial overrides. | | controlSphere0 | boolean | — | Whether the index-0 sphere is pointer-controlled. |

使用示例 / Usage

<script setup lang="ts">
import { Ballpit } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; overflow: hidden; height: 500px; width: 100%">
    <Ballpit
      :count="100"
      :gravity="0.01"
      :friction="0.9975"
      :wall-bounce="0.95"
      :follow-cursor="false"
    />
  </div>
</template>

Orb

ogl 光球背景

引入 / Import

import { Orb } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | hue | number | — | Hue rotation applied to the base colors (degrees). | | hoverIntensity | number | — | Strength of the wobble applied when hovered. | | rotateOnHover | boolean | — | Rotate the orb while hovered. | | forceHoverState | boolean | — | Force the hover state on regardless of the pointer. | | backgroundColor | string | — | Background color behind the orb (hex / rgb / hsl). | | className | string | — | Extra CSS class applied to the container element. |

使用示例 / Usage

<script setup lang="ts">
import { Orb } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 340px">
    <Orb
      :hue="0"
      :hover-intensity="0.2"
      :rotate-on-hover="true"
      :force-hover-state="false"
      background-color="#000000"
    />
  </div>
</template>

ShapeGrid

Canvas 形状网格

引入 / Import

import { ShapeGrid } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | direction | ShapeGridDirection | — | Scroll direction of the animated grid. | | speed | number | — | Scroll speed (minimum clamped to 0.1). | | borderColor | string | — | Stroke color of each cell (any CanvasStrokeStyle). | | squareSize | number | — | Size of each cell in px. | | hoverFillColor | string | — | Fill color of hovered cells. | | shape | ShapeGridShape | — | Cell shape. | | hoverTrailAmount | number | — | Number of trailing hovered shapes to keep lit (0 = no trail). | | className | string | — | Extra CSS class applied to the canvas element. |

使用示例 / Usage

<script setup lang="ts">
import { ShapeGrid } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; width: 100%; height: 600px">
    <ShapeGrid
      :speed="0.1"
      :square-size="40"
      direction="diagonal"
      border-color="#5408df"
      hover-fill-color="#222"
      shape="square"
      :hover-trail-amount="2"
    />
  </div>
</template>

GridDistortion

ogl 网格扭曲图像背景

引入 / Import

import { GridDistortion } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | grid | number | 15 | Number of grid subdivisions per axis. The plane mesh is segmented into (grid - 1) × (grid - 1) cells, so a higher valu… | | mouse | number | 0.1 | Mouse influence radius, expressed as a fraction of the grid. A larger value lets the pointer distort a wider neighbourho… | | strength | number | 0.15 | Distortion strength applied by mouse velocity. Higher values push the UVs further, producing a stronger "ripple" as the… | | relaxation | number | 0.9 | Per-frame relaxation of the distortion field back to rest (0..1). Closer to 1 means the field lingers longer before se… | | imageSrc | string | — | Source URL of the image rendered through the distorted mesh. | | className | string | '' | Extra CSS class appended to the root container element. |

使用示例 / Usage

<script setup lang="ts">
import { GridDistortion } from 'vue3-bits'
</script>

<template>
  <div style="position: relative; width: 100%; height: 600px">
    <GridDistortion
      image-src="https://picsum.photos/1920/1080?grayscale"
      :grid="15"
      :mouse="0.1"
      :strength="0.15"
      :relaxation="0.9"
    />
  </div>
</template>

CursorGrid

鼠标光晕网格背景

引入 / Import

import { CursorGrid } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | cellSize | number | 70 | Grid cell size in px (distance between lattice lines). | | color | string | '#D946EF' | Accent color of the lit cells (any CSS hex). | | radius | number | 140 | Pointer influence radius in px. | | falloff | Falloff | 'smooth' | Distance→brightness curve applied to cells inside radius. | | holdTime | number | 400 | How long (ms) a lit cell stays at full brightness before it starts fading. | | fadeDuration | number | 800 | Fade-out duration (ms) once holdTime has elapsed. | | lineWidth | number | 1.2 | Stroke line width of each lit cell. | | maxOpacity | number | 1 | Peak opacity of a fully lit cell. | | fillOpacity | number | 0 | Multiplier applied to the stroke opacity for the cell fill (0 = no fill). | | gridOpacity | number | 0 | Opacity of the static background lattice (0 = hidden). | | cellRadius | number | 0 | Corner radius (px) of each cell rectangle (0 = sharp corners). | | clickPulse | boolean | true | Emit an expanding ring pulse on pointer down. | | pulseSpeed | number | 600 | Expansion speed (px/s) of click pulses. | | className | string | '' | Extra CSS class appended to the root element. |

使用示例 / Usage

<script setup lang="ts">
import { CursorGrid } from 'vue3-bits'
</script>

<template>
  <CursorGrid
    :cell-size="70"
    :radius="140"
    falloff="smooth"
    :hold-time="400"
    :fade-duration="800"
    :click-pulse="true"
    color="#D946EF"
  />
</template>

OrbitImages

轨道环绕图片

引入 / Import

import { OrbitImages } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | images | string[] | — | Image URLs to orbit. | | altPrefix | string | 'Orbiting image' | Prefix for each image's generated alt text. | | shape | OrbitShape | 'ellipse' | Path shape the images travel along. | | customPath | string | '' | Custom SVG path d string (used when shape === 'custom'). | | baseWidth | number | 1400 | Design-space width/height of the orbit canvas (coordinate system for the path). | | radiusX | number | 700 | Ellipse / rectangle / infinity / wave horizontal radius (design px). | | radiusY | number | 170 | Ellipse / rectangle / infinity / wave vertical radius (design px). | | radius | number | 300 | Fallback radius for circle / square / triangle / star / heart (design px). | | starPoints | number | 5 | Number of points for the star shape. | | starInnerRatio | number | 0.5 | Inner/outer radius ratio for the star shape (0..1). | | rotation | number | -8 | Whole-orbit rotation in degrees (tilts the path). | | duration | number | 40 | Seconds for one full orbit. | | itemSize | number | 64 | Size (px) of each orbiting item. | | direction | 'normal' | 'reverse' | 'normal' | Orbit direction. | | fill | boolean | true | Distribute items evenly along the whole path (vs. all placed at 0%). | | width | number | '100%' | 100 | Container width: number (px) or '100%'. | | height | number | 'auto' | 100 | Container height: number (px) or 'auto'. | | className | string | '' | Extra CSS class appended to the container. | | showPath | boolean | false | Render the travel path as an SVG overlay. | | pathColor | string | 'rgba(0,0,0,0.1)' | Stroke color of the path overlay. | | pathWidth | number | 2 | Stroke width of the path overlay (design px). | | easing | 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear' | Timing function for the orbit motion. | | paused | boolean | false | Pause the orbit animation. | | centerContent | string | '' | Content rendered at the orbit center. Supplied as a string for convenience; richer (VNode) content can be passed through… | | responsive | boolean | false | Scale the design space to fit the container width (responsive). |

使用示例 / Usage

<script setup lang="ts">
import { OrbitImages } from 'vue3-bits'
</script>

<template>
  <OrbitImages
    :images="images"
    shape="ellipse"
    :radius-x="340"
    :radius-y="80"
    :rotation="-8"
    :duration="30"
    :item-size="80"
    responsive
    show-path
  />
</template>

Antigravity

反重力粒子环

引入 / Import

import { Antigravity } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | count | number | — | Number of instanced particles. | | magnetRadius | number | — | Pointer attraction radius — only particles inside it form the ring. | | ringRadius | number | — | Base radius of the ring particles are arranged on. | | waveSpeed | number | — | Speed of the sine wave travelling around the ring. | | waveAmplitude | number | — | Amplitude of the ring wave. | | particleSize | number | — | Base size of every particle (scaled by proximity + pulse). | | lerpSpeed | number | — | Position easing per frame (smaller = softer follow). | | color | string | — | Particle color (any CSS color string). | | autoAnimate | boolean | — | When the pointer is idle > 2s, the target auto-roams along a Lissajous path. | | particleVariance | number | — | Randomness applied to the per-particle pulse scale. | | rotationSpeed | number | — | Global rotation speed of the ring around the pointer. | | depthFactor | number | — | Z-axis depth scaling of the particles. | | pulseSpeed | number | — | Speed of the per-particle pulse scaling. | | particleShape | 'capsule' | 'sphere' | 'box' | 'tetrahedron' | — | Geometry shape of each instanced particle. | | fieldStrength | number | — | Strength of the per-particle radial deviation (perturbation). |

使用示例 / Usage

<script setup lang="ts">
import { Antigravity } from 'vue3-bits'
</script>

<template>
  <!-- Antigravity is a WebGL canvas: give its container an explicit size -->
  <div style="width: 100%; height: 400px; position: relative">
    <Antigravity
      :count="300"
      :magnet-radius="6"
      :ring-radius="7"
      :wave-speed="0.4"
      :wave-amplitude="1"
      :particle-size="1.5"
      :lerp-speed="0.05"
      color="#5227FF"
      auto-animate
      :particle-variance="1"
      :rotation-speed="0"
      :depth-factor="1"
      :pulse-speed="3"
      particle-shape="capsule"
      :field-strength="10"
    />
  </div>
</template>

LogoLoop

无限 Logo 跑马灯

引入 / Import

import { LogoLoop } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | logos | LogoItem[] | — | The list of logos to render and scroll. | | speed | number | 120 | Scroll speed in px/s (sign flips direction; magnitude is the speed). | | direction | 'left' | 'right' | 'up' | 'down' | 'left' | Scroll direction: left | right | up | down. | | width | number | string | '100%' | Container width (number → px, or any CSS length string). | | logoHeight | number | 28 | Rendered logo height in px (images are auto-scaled to this height). | | gap | number | 32 | Gap between logos in px. | | pauseOnHover | boolean | — | Slow to hoverSpeed (or stop) while the pointer is over the marquee. | | hoverSpeed | number | — | Velocity (px/s) the marquee eases to while hovered. | | fadeOut | boolean | false | Draw a gradient fade mask at the edges. | | fadeOutColor | string | — | Color of the fade mask (defaults to white / dark-aware auto color). | | scaleOnHover | boolean | false | Scale each logo up on hover. | | renderItem | (item: LogoItem, key: string) => VNode | — | Headless custom renderer (item, key) => VNode. Kept for 1:1 contract fidelity; the scoped #item slot takes precedenc… | | ariaLabel | string | 'Partner logos' | Accessibility label for the marquee region. | | className | string | — | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline CSS style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { LogoLoop } from 'vue3-bits'

const logos = [
  { title: 'React', href: 'https://react.dev' },
  { title: 'Vue', href: 'https://vuejs.org' },
  { title: 'TypeScript', href: 'https://www.typescriptlang.org' },
]
</script>

<template>
  <LogoLoop
    :logos="logos"
    :speed="120"
    direction="left"
    :logo-height="28"
    :gap="32"
    :fade-out="true"
    fade-out-color="#ffffff"
    :scale-on-hover="true"
    aria-label="Technology partners"
  >
    <template #item="{ item }">
      <span class="logo-chip">{{ item.title }}</span>
    </template>
  </LogoLoop>
</template>

ShapeBlur

形状边缘模糊背景

引入 / Import

import { ShapeBlur } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | '' | Extra CSS class appended to the root element. | | variation | number | 0 | Which shape variant the shader draws: - 0 → rounded rectangle outline (stroke) - 1 → filled circle - 2 → circle ou… | | pixelRatioProp | number | 2 | Pixel-ratio hint handed to the shader. On resize it is overridden by min(window.devicePixelRatio, 2), so this mainly… | | shapeSize | number | 1.2 | Size of the base shape (rectangle half-extent / circle radius scale). | | roundness | number | 0.4 | Corner roundness of the rectangle (only affects variation = 0). | | borderSize | number | 0.05 | Stroke width of the shape outline. | | circleSize | number | 0.3 | Radius of the mask circle that defines the blurred edge. | | circleEdge | number | 0.5 | Softness (anti-aliased width) of the mask circle edge. | | style | CSSProperties | — | Inline style object merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import ShapeBlur from 'vue3-bits'
</script>

<template>
  <div style="position: relative; height: 500px; overflow: hidden">
    <ShapeBlur
      :variation="0"
      :pixel-ratio-prop="window.devicePixelRatio || 1"
      :shape-size="1"
      :roundness="0.5"
      :border-size="0.05"
      :circle-size="0.25"
      :circle-edge="1"
    />
  </div>
</template>

ImageTrail

图片跟随拖尾

引入 / Import

import { ImageTrail } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | string[] | — | Image URL list; each tile follows the pointer in order and loops around. | | variant | number | 1 | Animation variant (1–8). Selects one of the eight ImageTrailVariantN engines. | | className | string | '' | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline styles merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { ImageTrail } from 'vue3-bits'
</script>

<template>
  <div style="height: 500px; position: relative; overflow: hidden">
    <ImageTrail
      :items="[
        'https://picsum.photos/id/287/300/300',
        'https://picsum.photos/id/1001/300/300',
        // ...
      ]"
      :variant="1"
    />
  </div>
</template>

Ribbons

着色器丝带背景

引入 / Import

import { Ribbons } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | colors | string[] | — | Per-ribbon colors (any CSS color string). One ribbon is spawned per entry. | | baseSpring | number | 0.03 | Spring stiffness — how hard each ribbon's head is pulled toward the pointer. | | baseFriction | number | 0.9 | Velocity damping; smaller = the head stops faster. A little jitter is added per ribbon. | | baseThickness | number | 30 | Base ribbon thickness in (CSS) pixels. A little jitter is added per ribbon. | | offsetFactor | number | 0.05 | Horizontal offset spread between ribbons (NDC units). | | maxAge | number | 500 | Trail lifetime in ms — larger = longer tail. 0 / non-finite = instant follow. | | pointCount | number | 50 | Sample points per ribbon — more = smoother curve. | | speedMultiplier | number | 0.6 | How quickly the trailing points chase the head (per-frame follow speed). | | enableFade | boolean | false | Fade the ribbon out toward its tail (alpha → 0 at the last point). | | enableShaderEffect | boolean | false | Add a sine wave displacement to the ribbon in the vertex shader. | | effectAmplitude | number | 2 | Amplitude of the shader wave displacement (only used when enableShaderEffect). | | backgroundColor | [number, number, number, number] | — | Clear-color [r, g, b, a] in 0–1 floats. [0,0,0,0] = transparent. | | className | string | — | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { Ribbons } from 'vue3-bits'
</script>

<template>
  <div style="height: 500px; position: relative; overflow: hidden">
    <Ribbons
      :colors="['#5227FF']"
      :base-thickness="30"
      :speed-multiplier="0.5"
      :max-age="500"
      :enable-fade="false"
      :enable-shader-effect="false"
    />
  </div>
</template>

MetaBalls

融合球背景

引入 / Import

import { MetaBalls } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | color | string | '#ffffff' | Base color of the orbiting metaballs (raw sRGB hex, fed 1:1 into the shader). | | cursorBallColor | string | '#ffffff' | Color of the interactive cursor metaball. | | cursorBallSize | number | 3 | Radius of the cursor metaball in shader space. | | ballCount | number | 15 | Number of orbiting metaballs (clamped to 50 internally). | | animationSize | number | 30 | Scale factor mapping pixels → shader coordinate space (smaller = larger balls). | | enableMouseInteraction | boolean | true | Let the pointer drive the cursor metaball; when false it idles on an orbit. | | enableTransparency | boolean | false | Render on a transparent background (edges fade out) instead of opaque black. | | hoverSmoothness | number | 0.05 | Lerp factor (0..1) for the cursor metaball easing toward its target. | | clumpFactor | number | 1 | Multiplier on each ball's orbit radius (higher = tighter clump). | | speed | number | 0.3 | Animation speed multiplier. | | className | string | '' | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline style object merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { MetaBalls } from 'vue3-bits'
</script>

<template>
  <div style="width: 600px; height: 400px; position: relative;">
    <MetaBalls
      color="#ffffff"
      cursor-ball-color="#ffffff"
      :cursor-ball-size="2"
      :ball-count="15"
      :animation-size="30"
      enable-mouse-interaction
      enable-transparency
      :hover-smoothness="0.15"
      :clump-factor="1"
      :speed="0.3"
    />
  </div>
</template>

FlyingPosters

three 飞行海报背景

引入 / Import

import { FlyingPosters } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | string[] | — | Poster image URLs (one plane per entry). The demo feeds inline SVG data URIs so it works fully offline — no external net… | | planeWidth | number | 320 | Poster plane width as a fraction of the screen (viewport.width * planeWidth / screen.width). | | planeHeight | number | 320 | Poster plane height as a fraction of the screen (viewport.height * planeHeight / screen.height). | | distortion | number | 3 | Distortion strength applied to each poster as it flies (drives the vertex-shader rotation). | | scrollEase | number | 0.01 | Scroll easing factor (0–1) — how quickly current chases target. | | cameraFov | number | 45 | Perspective camera field of view (degrees). | | cameraZ | number | 20 | Perspective camera distance from the z=0 plane. | | autoScroll | boolean | false | When true, the column auto-drifts without user input (handy for demos / QA). Default false keeps source behaviour. | | className | string | '' | Extra CSS class appended to the root element. | | style | CSSProperties | — | Inline style merged onto the root element. |

使用示例 / Usage

<script setup lang="ts">
import { FlyingPosters } from 'vue3-bits'
</script>

<template>
  <div style="height: 600px; position: relative; overflow: hidden">
    <FlyingPosters
      :items="items"
      :plane-width="390"
      :plane-height="320"
      :distortion="3"
      :scroll-ease="0.01"
      :camera-fov="45"
      :camera-z="20"
    />
  </div>
</template>

Interaction

SpotlightCard

鼠标聚光卡片

引入 / Import

import { SpotlightCard } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | '' | Extra CSS class appended to the root element. | | spotlightColor | string | 'rgba(255, 255, 255, 0.25)' | Color of the spotlight radial gradient (any CSS color). |

使用示例 / Usage

<script setup lang="ts">
import { SpotlightCard } from 'vue3-bits'
</script>

<template>
  <SpotlightCard spotlight-color="rgba(0, 229, 255, 0.2)">
    <h2>Spotlight Card</h2>
    <p>Move your cursor — the glow follows.</p>
  </SpotlightCard>
</template>

BorderGlow

边框流光卡片

引入 / Import

import { BorderGlow } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | '' | Extra CSS class appended to the root element. | | edgeSensitivity | number | 30 | Distance (px) from edge at which the glow starts fading in. | | glowColor | string | '40 80 80' | Base HSL triplet for the inner glow ring, e.g. '40 80 80'. | | backgroundColor | string | '#120F17' | Card background color. | | borderRadius | number | 28 | Corner radius in px. | | glowRadius | number | 40 | Outer glow padding (px) — how far the glow spreads outside the card. | | glowIntensity | number | 1.0 | Multiplier applied to every glow layer's opacity (0..1+). | | coneSpread | number | 25 | Half-angle (deg) of the bright cone that follows the cursor. | | animated | boolean | false | Run the idle sweep animation on mount. | | colors | string[] | — | Colors used to build the mesh-gradient border. | | fillOpacity | number | 0.5 | Opacity of the inner mesh-gradient fill. |

使用示例 / Usage

<script setup lang="ts">
import { BorderGlow } from 'vue3-bits'
</script>

<template>
  <BorderGlow
    glow-color="40 80 80"
    :border-radius="16"
    :glow-radius="12"
    :animated="true"
  >
    <h2>Border Glow</h2>
  </BorderGlow>
</template>

Dock

macOS 放大坞

引入 / Import

import { Dock } from 'vue3-bits'

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | items | DockItemData[] | — | Dock entries. | | className | string | '' | Extra CSS class appended to the panel. | | spring | SpringOptions | — | Spring used for the magnifica