如何用 React Bits Background Studio 调整背景参数并导出可用于自己项目的组件代码【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bitsReact Bits 的 Background Studio 是一个在线调参工作台你在其中选中某个动画背景如 Silk、CRT Warp、Galaxy用滑杆、开关和取色器调整它的参数实时预览效果然后点 Export Code 生成一条 shadcn CLI 安装命令和一段带全部 props 的 JSX 代码把这套调好的背景原样搬进自己的 React 项目。下面以仓库源码中的真实行为为依据走一遍进入 Studio → 调参 → 导出 → 在自己项目中使用这条路径。进入 Background StudioStudio 是站点 Tools 页下的一个路由。仓库中的路由定义在 App.jsx/tools/:toolId?对应 ToolsPage.jsxBackground Studio 组件按 TOOLS 配置 懒加载页面地址形如/tools/background-studio?bgsilkbg参数决定当前编辑哪个背景缺省为silk如果bg指向不存在的背景会回退到列表第一项见 BackgroundStudio.jsx。进入方式有两条直接打开 Tools 页站点导航栏的 Tools 入口选择 Background Studio在任意背景组件的预览页点 Open in BG Studio 按钮。该按钮由 OpenInStudioButton.jsx 生成链接会把组件页上当前已修改、且不同于默认值的参数一并写进 URL相当于带着你的调参结果进入 Studio。选择背景并调整参数Studio 界面左侧大屏下固定 280px 宽是控制面板右侧是预览区。选择背景。面板顶部的 Background 下拉框列出全部可选背景列表定义在 backgrounds/index.js包括 CRT Warp、Molten Metal、Gradient Waves、Silk、Aurora、Particles、Hyperspeed、Galaxy、Plasma 等。下拉框内置搜索框输入关键字按 label 过滤点击某一项即切换URL 更新为?bgid之前的调参会被清空。调整参数。每个背景可暴露哪些参数、什么类型、默认值是多少都由backgrounds/index.js中该背景的props数组声明面板按type渲染不同控件见 Controls.jsxtype控件说明number纵向滑杆受声明中的min/max/step约束boolean开关如mouseInteractioncolor取色器单个颜色colorArray多行取色器可按声明的minItems/maxItems增删颜色select下拉选择从声明的options中选rgbArray取色器内部转 RGB 数组如 Threads 的colortext文本输入框如 Grid Distortion 的imageSrc以默认背景 Silk 为例backgrounds/index.js 声明了 5 个参数speed默认 5、scale默认 1、color默认#7B7481、noiseIntensity默认 1.5、rotation默认 0。拖动任一滑杆或改色后预览区立即刷新。参数会同步到 URL。每次改动经约 300ms 防抖后写入查询字符串BackgroundStudio.jsx规则是值等于默认值的参数不写入 URL颜色值去掉#前缀例如color5227FFcolorArray用逗号连接如colorStops5227FF,7cff67,5227FF。因此 URL 本身就是当前参数组合的快照。面板底部的Reset会把参数恢复为默认值URL 只剩bgShare会把当前完整 URL 复制到剪贴板别人打开同一个地址就能看到同一套参数。画布底色Canvas BG。取色器旁边的 Canvas BG 控制预览画布的背景色用于观察背景在深浅底色下的表现。源码中的提示写明部分效果在浅色画布上可能不合适且一些效果本身没有透明背景因此预览画布颜色不代表导出组件的实际底色。特例Hyperspeed。该背景只有一个preset下拉参数六个选项对应Cyberpunkone、Akiratwo、Goldenthree、Splitfour、Highwayfive、Neon Wavessix运行时映射到hyperspeedPresets中对应的effectOptionsBackgroundStudio.jsx导出代码时也走专门的模板见下文。导出可安装的组件代码调好参数后点面板底部的Export Code弹出 Export Your Background 对话框分两步Controls.jsx。Step 1: Install via CLI。对话框给出包管理器切换按钮pnpm / npm / yarn / bun和对应的 shadcn 安装命令。命令由 cli.js 按react-bits/{组件名}-{语言}-{样式}规则生成组件名是背景 label 去掉空格语言/样式取自站点当前的预设默认 JS Tailwind即JS-TW。以 Silk、npm 为例npx shadcnlatest add react-bits/Silk-JS-TW同一组件在其他包管理器下的形式源码 cli.js# pnpm pnpm dlx shadcnlatest add react-bits/Silk-JS-TW # yarn yarn shadcnlatest add react-bits/Silk-JS-TW # bun bun x --bun shadcnlatest add react-bits/Silk-JS-TWStep 2: Copy Code。带行号的代码高亮块显示一段可直接使用的 JSX。普通背景的代码由 exportCode.js 生成形式固定为一个 1080x1080 的相对定位容器包着以组件名label 去空格命名的标签且包含该背景声明的全部 props——调过的取当前值没调过的取默认值。以下代码是按该模板对 Silk 示例speed8、color#5227FF其余为默认值生成的样式具体值以你在 Studio 中的设置为准div style{{ width: 1080px, height: 1080px, position: relative }} Silk speed{8} scale{1} color#5227FF noiseIntensity{1.5} rotation{0} / /div注意组件名与 URL 里的bgid 不完全一样bgsilk对应标签Silk而Gradient Waves对应GradientWaves、CRT Warp对应CRTWarp。Hyperspeed 的导出代码走 exportCode.js 中的专用模板引用./HyperSpeedPresets并传入所选预设的effectOptions以下为源码模板原样one对应 Cyberpunkimport { hyperspeedPresets } from ./HyperSpeedPresets; // Using Cyberpunk preset div style{{ width: 1080px, height: 1080px, position: relative }} Hyperspeed effectOptions{hyperspeedPresets.one} / /div在自己项目中使用时在 Step 1 的命令执行完、组件文件落入项目后把 Step 2 的 JSX 贴到目标位置即可。外层 div 的 1080x1080 尺寸是导出模板写死的实际接入时按你的容器自行调整。验证结果这条流程有三个可核对的检查点在 Studio 里确认参数已生效。改参数后预览区应实时变化地址栏查询字符串中出现所有非默认值颜色不带#Reset 后这些参数从 URL 消失、预览回到默认外观。在导出对话框里核对。Step 2 代码中的每个 prop 值应与你在面板里设置的值一一对应代码块和安装命令旁都有复制按钮。在自己的项目里运行安装命令。命令执行成功后按 Step 2 的 JSX 引入组件名渲染背景效果应与 Studio 预览一致。README 中给出的 CLI 安装路径即 shadcn 方式示例为npx shadcnlatest add react-bits/BlurText-TS-TWStudio 导出对话框的 Step 1 与它属于同一安装体系。可选同时导出图片与视频代码之外预览区左下角还有两个导出按钮仅大屏显示Image把预览截取为 1920x1080 的 PNG文件名形如{bg}-时间戳.png10s Video录制 10 秒 1920x1080 的 WebM 视频60fps 采样、码率 20Mbps编码按浏览器支持依次尝试 h264 → vp9 → webm文件名形如{bg}-时间戳.webm。录制期间控制面板变灰不可用倒计时结束自动停止并触发下载录制中可点同一按钮取消。两者适合需要静态图或演示素材的场景如果你要的是可交互的 React 组件仍以 Export Code 为准。限制与注意点导出的 JSX 包含该背景声明的全部props含未修改项不是只导出你动过的参数安装命令中的语言/样式后缀跟随站点当前的预设如JS-TW、TS-CSS换预设后命令和包名会随之变化预览画布底色只影响观察不代表组件自身底色部分效果没有透明背景小屏设备下控制面板收进底部抽屉Controls 按钮唤起Image / 10s Video 按钮在小屏不显示面板中的Read Full Docs按钮跳转到该背景的组件文档页路由/backgrounds/{id}需要逐项核对参数含义时可以继续查阅。【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考