vue3-bits

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

共 182 个组件，按分类组织如下。 182 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

• Carousel
• Circular Gallery
• Cubes
• Fluid Glass
• Model Viewer
• Profile Card

Background

• Acid Squares
• Aero Shards
• Antigravity
• Aurora
• Balatro
• Ballpit
• Beams
• Color Bends
• CRT Warp
• Cursor Grid
• Dark Veil
• Dither
• Dot Field
• Dot Grid
• Drift Wall
• Elastic Mesh
• Evil Eye
• Faulty Terminal
• Ferrofluid
• Floating Lines
• Flux Lines
• Flying Posters
• Galaxy
• Ghost Fibers
• Gradient Blinds
• Gradient Waves
• Grainient
• Grid Distortion
• Grid Motion
• Grid Scan
• Halftone Reveal
• Hyperspeed
• Image Trail
• Iridescence
• Laser Flow
• Letter Glitch
• Lightfall
• Lightning
• Light Pillar
• Light Rays
• Light Tunnel
• Line Waves
• Liquid Chrome
• Liquid Ether
• Logo Loop
• Magic Rings
• Magnet Lines
• Meta Balls
• Metallic Paint
• Micro Slats
• Molten Metal
• Noise
• Orb
• Orbit Images
• Particles
• Pattern Waves
• Pixel Blast
• Pixel Snow
• Plasma
• Plasma Wave
• Prism
• Prismatic Burst
• Radar
• Ribbons
• Ripple Distortion
• Ripple Grid
• Scanner
• Shape Blur
• Shape Grid
• Shape Waves
• Side Rays
• Silk
• Sliced Waves
• Soft Aurora
• Strands
• Threads
• Topography
• Waves
• Web Threads

Interaction

• Accordion Gallery
• Animated Content
• Blob Cursor
• Border Glow
• Bounce Cards
• Bubble Menu
• Card Nav
• Card Swap
• Chroma Grid
• Circular Carousel
• Click Spark
• Counter
• Crosshair
• Crystalized Ball
• Curved Input
• Decay Card
• Depth Carousel
• Dither Veil
• Dock
• Dome Gallery
• Elastic Slider
• Electric Border
• Electric Logo
• Fade Content
• Flex Carousel
• Flowing Menu
• Folder
• Ghost Cursor
• Glare Hover
• Glass Icons
• Glass Surface
• Glow Cursor
• Gooey Nav
• Holo Card
• Infinite Menu
• Infinite Spiral
• Lanyard
• Magic Bento
• Magnet
• Masonry
• Morph Slider
• Option Wheel
• Pill Nav
• Pixel Card
• Pixel Swap
• Pixel Trail
• Pixel Transition
• Reflective Card
• Scroll Expand
• Scroll Stack
• Specular Button
• Splash Cursor
• Spotlight Card
• Stack
• Staggered Menu
• Stepper
• Sticker Peel
• Swarm Cursor
• Target Cursor
• Tilted Card

Text

• Animated List
• Ascii Text
• Blur Text
• Circular Text
• Count Up
• Curved Loop
• Decrypted Text
• Depth Text
• Echo Text
• Falling Text
• Fold Text
• Fuzzy Text
• Glitch Text
• Gradient Text
• Gradual Blur
• Line Sidebar
• Masked Heading
• Particle Text
• Rotating Text
• Scrambled Text
• Scroll Float
• Scroll Reveal
• Scroll Velocity
• Shiny Text
• Shuffle
• Split Flap Text
• Split Text
• Star Border
• Stroke Text
• Tech Text
• Text Cursor
• Text Loop
• Text Pressure
• Text Type
• True Focus
• Variable Proximity
• Warp Text

ModelViewer

TresJS 模型查看器

引入 / Import

import { ModelViewer } from 'vue3-bits'

Props

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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

使用示例 / 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>

FluxLines

ogl 流动光线背景

引入 / Import

import { FluxLines } from 'vue3-bits'

Props