组件档案Components

22 项记录2026.10.26

个人网站背景

流动点阵

灰黑双色点阵，用于终端首屏和双卡故事的同一层背景。

项目组件

载入背景…

Chroma Current

import ChromaCurrent from "@/components/react-bits/chroma-current"

<div style={{ position: "relative", height: 320 }}>
  <ChromaCurrent colors={["#252525", "#989898"]}
    backgroundColor="#fafafa" pattern="streams"
    speed={0.28} intensity={0.6} dpr={1}
    interactive={false} intro={false} paused={paused} />
</div>

动效约束

最多 30fps；隐藏、离开视口或减少动态时停止绘制。
父容器必须有明确宽高；动态载入并关闭 SSR。

项目组件 3 项 · 其余为交互示意 · 示例数据不连接业务服务设计规范文案规范

全部组件记录

流动点阵 · 个人网站 · 项目使用

灰黑双色点阵，用于终端首屏和双卡故事的同一层背景。

import ChromaCurrent from "@/components/react-bits/chroma-current"

<div style={{ position: "relative", height: 320 }}>
  <ChromaCurrent colors={["#252525", "#989898"]}
    backgroundColor="#fafafa" pattern="streams"
    speed={0.28} intensity={0.6} dpr={1}
    interactive={false} intro={false} paused={paused} />
</div>

最多 30fps；隐藏、离开视口或减少动态时停止绘制。
父容器必须有明确宽高；动态载入并关闭 SSR。

块状光标打字 · 个人网站 · 项目使用

终端技术栈轮换，固定行高和可用宽度。

import TextType from "@/components/react-bits/text-type"

<TextType as="span" text={["TypeScript", "React", "Next.js", "Rust", "C++"]}
  typingSpeed={60} deletingSpeed={45} pauseDuration={1250}
  initialDelay={250} cursorBlinkDuration={0.5}
  cursorCharacter="▌" startOnVisible />

块状光标每 0.5 秒闪烁。
减少动态显示静态词；屏幕阅读器读取完整技术栈。

玻璃胶囊导航 · 个人网站 · 项目使用

手机直接切换栏目，选中底板在栏目之间连续移动。

import { SiteNav } from "@/components/portfolio/site-nav"

// 挂在共享 layout 中，切页时保留同一个导航实例。
<SiteNav />

// 选中底板：
<motion.span layoutId="studio-navigation"
  transition={{ type: "spring", stiffness: 450, damping: 35 }} />

选中底板采用共享布局。
固定导航与模态使用相同滚动条补偿；开合不改变坐标。

共享布局弹层 · 个人网站 · 项目使用

卡片、图像、标题分别连续变形为详情弹层。

import ModalCards from "@/components/react-bits/modal-cards"

<ModalCards cards={photos} presentation="grid"
  animationSpeed="normal" closeOnEscape
  closeOnBackdropClick />

// photos: { id, imageUrl, title, description, width?, height? }[]

项目卡片开合 0.85 秒，曲线 [0.42, 0, 0.22, 1]。
图形与字标连续缩放、平移、旋转；退出完成后再卸载。

横向项目流程 · 个人网站 · 项目使用

左侧步骤与右侧横向面板配合，保持两项目六步骤。

import { HowItWorks9 } from "@/components/blocks/how-it-works-9"

<HowItWorks9 steps={steps} active={active} offset={0}
  panels={panels} x={x} onSelect={setActive}
  diagram={diagram} animated={!reduced} />

纵向原生滚动驱动横向进度，往返恢复。
矮窗口与减少动态使用手动切换；可随时关闭联动。

透视技术栈 · 个人网站 · 项目使用

三层透视面板展示 Rust、Agent 和 Web。

import Bento16 from "@/components/blocks/bento-16"

<Bento16 />

指针进入时增大层间距，离开恢复。
减少动态时过渡时长为 0。

摄影选片 · 个人网站 · 项目使用

摄影轮播与共享布局大图使用同一份选片数据。

import Bento34 from "@/components/blocks/bento-34"

<Bento34 photos={photos} count={photoCount} />

前后切换循环取模。
大图打开与返回保持当前选片和焦点。

紧凑联系页脚 · 个人网站 · 项目使用

深色联系区域、真实导航与版权，收束长页面。

import Footer12 from "@/components/blocks/footer-12"

<Footer12 />

不依赖持续动效。

双卡滚动故事 · 个人网站 · 项目使用

低底色玻璃双卡随滚动展开、展示项目首屏并收回。

import { HomeStory } from "@/components/portfolio/home-story"

<HomeStory />

位置、大小、旋转、字标使用同一 smoothstep 进度。
继续滚轮或触摸立即中断自动落位；不阻止原生滚动。

缎面背景 · 同频 · 项目使用

登录页桌面区域使用缓慢流动的蓝色缎面。

import SatinRidges from "@/components/react-bits/satin-ridges"

<SatinRidges colors={["#e2edfc", "#aacafa"]}
  backgroundColor="#7ea5db" angle={-24} scale={0.9}
  warp={1.1} detail={0.65} gloss={0.3} speed={0.24}
  interactive={false} clickRipples={false}
  paused={reduced || !visible} dpr={1.25} />

隐藏和减少动态时暂停。
仅桌面挂载；WebGL 不可用时保留静态底色。

学习热力图 · 同频 · 项目使用

按专注、任务完成率和打卡加权的日历热力图。

import Analytics9 from "@/components/blocks/analytics-9"

<Analytics9 member={member} today={today} action={action} />

七级色阶；空记录与未来日期单独处理。
支持指针检查与方向键导航。

个人资料面板 · 同频 · 项目使用

封面、头像、个人目标与自己的学习记录。

import Profile1 from "@/components/blocks/profile-1"

<Profile1 user={user} member={member} space={space}
  action={action} onInvite={invite} onLogout={logout}
  onStartTour={startTour} reduced={reduced}
  onReducedChange={setReduced} />

受控 Dialog 编辑头像和目标。
保存成功反馈真实结果。

浮动移动导航 · 同频 · 项目使用

五个图标入口与共享选中指示器。

import Mobile3 from "@/components/blocks/mobile-3"

<Mobile3 active={page} onChange={setPage} />

手机导航位于视口顶部，避开 Safari 底部工具栏。
Portal 挂到 document.body；减少动态时直接定位。

轮换文字 · LumenLab · 项目使用

稳定前缀与逐字符上下切换的词语。

import { RotatingText } from "@/components/ui/rotating-text"

<RotatingText prefix="Lumen" texts={["Lab", "Learn", "Build"]}
  interval={2200} staggerDuration={0.025} />

字符进入 y:100%，退出 y:-120%。
容器宽度使用 0.5 秒 tween，避免弹簧抖动。

分步创建表单 · LumenLab · 项目使用

将学习背景、学科、大纲和命名拆成四步。

// 项目中的字段提交给真实创建逻辑。
<form onSubmit={submit}>
  <StepFields step={step} value={form} onChange={setForm} />
  <button type="button" onClick={previous}>上一步</button>
  <button disabled={busy}>{busy ? "正在处理…" : "下一步"}</button>
</form>

保留上一步和已填写内容。
处理文件时仅在对应步骤显示状态。

问题反馈 · LumenLab · 项目使用

问题、建议、其他三种分类与短表单。

// 业务适配层示意
<FeedbackForm kind={kind} onKindChange={setKind}
  value={message} onChange={setMessage}
  status={status} onSubmit={submitFeedback} />

提交中禁用重复操作；失败保留输入。
成功后显示短事实反馈。

连接地球 · 网络门户 · 项目使用

点阵地球用于页面视觉，不暴露真实节点或线路。

// 封装接口示意，具体 props 以本地定义为准。
<Suspense fallback={<StaticGlobe />}>
  <ConnectionGlobe paused={reduced || !visible} />
</Suspense>

延迟载入重型可视化。
预览为 SVG 几何示意，不宣称真实链路。

状态数据块 · 网络门户 · 项目使用

真实数据与状态色组成的紧凑指标面板。

import Bento6 from "@/components/blocks/bento-6"

<Bento6 stats={stats} />

进入视口后开始累计，卸载时停止。
减少动态直接显示目标值。

筛选数据表 · 网络门户 · 项目使用

状态筛选、排序与按行管理操作。

import Bento30 from "@/components/blocks/bento-30"

<Bento30 users={users} currentUserId={currentUserId}
  busyId={busyId} onAction={requestConfirmation} />

过滤和排序通过派生数据生成。
删除和重置等动作由业务确认框承接。

短状态通知 · 网络门户 · 项目使用

操作反馈置于独立通知层，不占用主流程。

// 应用的 useToast 适配层
const { toast } = useToast()
toast("已复制", "success")
// 具体签名以业务封装为准。

进入和退出使用 AnimatePresence。
失败提示保留原因与可执行动作。

三卡首屏 · 个人网站 · 历史方案

早期选用的叠放卡片首屏；现被终端首屏取代。

// 历史组件，当前首页不挂载。
import { Hero10 } from "@/components/blocks/hero-10"

只记录历史方案，不重新挂载到首页。

滚动层叠 · 同频 · 源码留存

仓库保留滚动层叠源码，未发现当前业务导入。

// 源码留存；先读取导出与 Props 后再接入。
// src/components/react-bits/scroll-stack.tsx

接入前验证原生滚动、反向恢复及手机高度。

加载中

项目组件 3 项 · 其余为交互示意 · 示例数据不连接业务服务设计规范文案规范