用了半个多月我把一个纯粹用文字堆出来的个人博客重构成一个叫Surreal_Blog的超现实视觉实验场。它不只是换了一层皮肤而是从布局、动效到内容呈现方式都推翻重来。这篇文章想聊的不是“我搭了个博客”这么简单而是怎么把一个普通文章站做成一个像梦境入口一样的地方同时又不牺牲加载速度和阅读体验。毕竟好看是一回事能不能让人稳定地读下去是另一回事。这个项目适合谁参考如果你是前端开发者、独立设计师或者对 Three.js、WebGL 动画、以及“内容型网站如何融合视觉实验”感兴趣这篇复盘应该能给你一套可以拿走的实战路径。尤其适合那些不甘心自己的博客一辈子只停留在“白底黑字 两栏布局”的人。1. 项目定位与核心设计思路1.1 超现实美学在博客场景里的落地方式先说清楚什么是“超现实”。不是完全的抽象和混乱而是把现实元素拆开再重组让人第一眼觉得熟悉第二眼觉得不对劲。比如一个原本该摆在地上的球体缓缓悬浮在半空比如首页标题的文字层叠错位像没对准焦距的相机。这种“一点错位”带来的错愕感正是超现实表达的核心。但博客是给人读内容的不是给人看展览的所以我的核心策略是氛围给足内容克制。首页和文章头图可以尽情做漂浮物、迷雾、扭曲光斑文章正文区域则回归高对比度排版只保留一层淡淡的噪点纹理。这样读者进入文章之后不会被一堆不明动画干扰也不会觉得“这网站好看但没法用”。另一个思路是把超现实用在叙事结构上。博客里有一个“时间线”页面我把所有文章按照发布顺序排列但每一篇卡片都带一点随机旋转和位移整条时间线看起来就像漂浮在空气中的胶片条。这比普通的时间轴列表更有辨识度也是整个项目里我最满意的一个模块。1.2 信息架构与交互层级设计做这种项目最容易踩的坑就是只顾视觉效果把信息架构做乱。我在开工之前先画了很粗的信息架构首页展示最新 3 篇文章 一句引导语背景是悬浮的 3D 球体和粒子层。文章列表页时间线式卡片流带滚动视差但卡片本身内容信息完整。文章详情页大标题头图 正文排版头图区域允许放动态效果正文区域保持静态。关于页更像一个“实验展示台”放我做的 WebGL 小demo 和摄影碎片。为什么这么分因为用户的目标有两种随便看看型会先逛首页和列表页搜索阅读型会直接进文章详情页。前者可以接受更强的视觉冲击后者更需要速度与舒适度。所以我把视觉特效集中在首页和列表页把性能和排版集中在详情页这等于做了一个隐形分层。1.3 放弃 WordPress 转投静态方案的原因我当初考虑过 WordPress 特效插件但很快就否了。超现实效果如果要玩得自由必须直接控制 DOM、Canvas 和渲染循环拖插件只会被插件限制。而且这种偏展示型的博客其实没那么多动态数据用静态站点生成器反而更合适。最终选了 Next.js因为它在静态输出和动态交互之间平衡得比较好。文章内容用 Markdown 管理构建时把所有页面预渲染成 HTML配上 CDN 缓存之后打开速度比传统 PHP 类博客快不少。因为整个站没有服务器端数据库查询也不会因为无效请求被打崩。2. 技术选型与核心依赖解析2.1 前端渲染框架为什么是 Next.js 而不是 Vite 或 Astro先说结论如果你也想做这种重交互的视觉站点并且需要 SEO应该优先考虑 Next.js 这类能静态生成的 React 框架。我测试过纯 Vite React SPA 方案开发很爽但有个致命问题爬虫拿到的是空壳 HTML文章内容全靠客户端渲染这对一个希望长期沉淀内容的博客来说是不可接受的。Astro 也很好但对 3D 场景和复杂交互的支持没有 React 生态那么顺手尤其是 React Three Fiber 这套东西在 Astro 里还要包一层。所以最终选型是Next.jsApp Router负责页面框架、路由和静态生成。React Three FiberR3F管理 3D 场景它把 Three.js 变成了声明式 JSX写起来比裸 Three.js 舒服很多。GSAP ScrollTrigger做滚动动效兼容性和可控性都比纯 CSS scroll-driven 好而且能精准和 Canvas 场景联动。Tailwind CSS处理全局样式速度快也不会因为自定义类名过多导致 CSS 文件膨胀。2.2 超现实视觉的三层结构Canvas、DOM 和 CSS 滤镜整个视觉系统我拆成了三层它们各管一摊互不干扰Canvas 层体积感、光照、漂浮物体。所有 3D 东西都在这里Article 详情页的首图区域也复用了同一个场景组。DOM 层标题错位、卡片漂浮、文字抖动。用 CSS transform GSAP 驱动成本低、效果好。滤镜层整体噪点、对比度、色相偏移。我用了 SVG feTurbulence 生成胶片噪点叠加层再用 backdrop-filter 做毛玻璃卡片。毛玻璃用得不多只在导航栏和文章摘要卡片上出现因为全站毛玻璃会导致滚动性能下降。我强烈建议不要把所有视觉特效都塞进 WebGL能用 DOM 解决的用 DOM能做成静态纹理的不要实时计算。我在 3D 场景里只保留了六个大球体和一个粒子带全部用 shader 做了简单光照没有加载任何外部模型所以包体积很可控。2.3 数据流用 Markdown 做内容仓库不做后台文章系统走了最朴素的方案直接把 Markdown 文件放在仓库的content/posts目录下用 gray-matter 解析 Front Matter用 unified 生态链渲染正文。没有接 CMS没有上数据库因为个人博客根本不需要实时发布。这样有一个好处每篇文章都是一个可审查的文本文件改错字直接推 GitHub构建平台自动出效果。而且 Markdown 渲染是纯静态的不会像 WordPress 那样加载大量运行时脚本。在渲染正文时我加了两段额外处理代码高亮用 rehype-pretty-code高亮样式和整体超现实暗色背景非常搭。图片优化用 next/image 统一做压缩和响应式尺寸并给 Head 图单独设置 priority避免加载被滞后。3. 实操过程与核心实现3.1 初始化项目与依赖清单如果你要复刻这个项目可以从零搭起。我用的是 create-next-app 初始化然后额外安装了以下依赖npm install three react-three/fiber react-three/drei gsap npm install gray-matter remark remark-html rehype-pretty-code npm install tailwindcss tailwindcss/typography这里特别说明一下几个依赖的作用方便你按需删减react-three/drei提供非常多开箱即用的 3D 工具比如 Float让物体漂浮、Environment环境光照、Points粒子系统。我用它省去了大量手写辅助代码。tailwindcss/typography是 Tailwind 官方排版插件直接给文章正文加上一套漂亮的默认样式省得自己调字号和行高。目录结构大概是这样surreal_blog/ ├── app/ │ ├── layout.tsx │ ├── page.tsx // 首页 │ └── posts/ │ ├── [slug]/page.tsx │ └── page.tsx // 列表页 ├── components/ │ ├── canvas/ │ │ ├── Scene.tsx │ │ └── FloatingShapes.tsx │ ├── dom/ │ │ ├── TimeLineCard.tsx │ │ └── NoiseOverlay.tsx ├── content/ │ └── posts/ │ └── hello-world.md └── lib/ └── posts.ts // 读取 Markdown 文件3.2 首页 3D 悬浮场景的实现首页背景我放了一个 Canvas里面用 drei 的Float组件让几个球体不规则浮动。核心代码长这样use client; import { Canvas } from react-three/fiber; import { Float, Environment, Lightformer } from react-three/drei; import { Suspense } from react; function FloatingShapes() { return ( {[ { position: [-3.5, 1.2, -1], scale: 1.2, color: #7f5af0 }, { position: [4.2, -0.8, -2], scale: 0.8, color: #f25082 }, { position: [0.5, 2.5, -3], scale: 0.6, color: #2cb67d }, ].map((item, index) ( Float key{index} speed{1.5} rotationIntensity{1.2} floatIntensity{2.2} mesh position{item.position} scale{item.scale} sphereGeometry / meshStandardMaterial color{item.color} roughness{0.25} metalness{0.75} / /mesh /Float ))} points bufferGeometry float32BufferAttribute attachattributes-position args{[generateParticles(600), 3]} / /bufferGeometry pointsMaterial size{0.04} color#ffffff transparent opacity{0.6} / /points / ); } export default function Scene() { return ( Canvas dpr{[1, 1.5]} camera{{ position: [0, 0, 8], fov: 45 }} gl{{ antialias: true, alpha: true }} style{{ position: fixed, inset: 0, zIndex: 0 }} ambientLight intensity{0.4} / spotLight position{[5, 5, 5]} intensity{1.2} / Suspense fallback{null} FloatingShapes / Environment presetcity / /Suspense /Canvas ); }几个关键坑先写在这里后面还会细说dpr必须限制不然高分屏上 Retina 会直接吃掉 GPU我正在手机上看就是严重发热。Environment presetcity会加载一个 HDR 环境贴图体积不小。我实际改用了一个极简的环境光 点光源效果也能看体积却能少 300KB。Canvas 固定定位铺底之后注意在最外层加高 z-index 的内容容器否则点击事件会被 Canvas 捕获。3.3 滚动驱动的超现实动效我用了 GSAP 的 ScrollTrigger 让页面元素在滚动时产生分层位移具体效果是首页标题移动速度比背景慢产生“景深感”列表页卡片循环入场时逐个旋转并浮起像从水中冒出来。核心思路是这样一段逻辑use client; import { useEffect, useRef } from react; import gsap from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; gsap.registerPlugin(ScrollTrigger); export function useParallax(speed 0.15) { const ref useRefHTMLDivElement(null); useEffect(() { const el ref.current; if (!el) return; const ctx gsap.context(() { gsap.fromTo( el, { y: 0 }, { y: () -(el.offsetHeight * speed), ease: none, scrollTrigger: { trigger: el, start: top top, end: bottom top, scrub: true, }, } ); }, ref); return () ctx.revert(); }, [speed]); return ref; }用gsap.context把动画限制在这个节点内部这样组件卸载时能干净地清理动画不会拖慢后续页面的交互。还有一个很容易忽略的细节ScrollTrigger 的位置计算依赖布局稳定如果页面里的字体还没加载完成或者图片还没有占位尺寸计算出错就会造成滚动跳动。我的解决方式是给图片强制设置aspect-ratio并在布局里预占尺寸组件挂载后手动ScrollTrigger.refresh()一次。3.4 文章详情页的阅读体验优化文章页是整个项目里最克制的地方。我没有放任何 3D 动画在正文旁边只保留了顶部头图的动态背景正文部分用一套非常干净的排版页面最大宽度 680px居中。这个宽度接近中文阅读的最优行长大概在 65 字符左右。字体大小 17px行高 1.8段间距 1.25em。正文背景是一层半透明白色遮罩配合 backdrop-filter 磨砂效果把底下动态背景的干扰降到最低。代码块用了深色背景和等宽字体没有做花哨的胶囊标签和动效。为什么这么设计因为超现实美学讲究一种“从虚幻中聚焦现实”的感受。文章正文就是那个现实如果正文区域也到处是漂浮元素读者根本没办法专注。对比越强标题头图的超现实感反而越明显。3.5 时间线列表页的“漂浮胶片”设计前面提到的时间线列表页是我觉得最值得分享的交互设计。每篇文章卡片用不同角度的旋转堆叠起来滚动时卡片按顺序归位。代码上主要是 ScrollTrigger 的stagger参数配合每个卡片的独立transformgsap.to(.timeline-card, { x: 0, y: 0, rotation: 0, opacity: 1, duration: 1, ease: power3.out, stagger: 0.08, scrollTrigger: { trigger: .timeline-wrap, start: top 80%, end: bottom top, scrub: false, }, });这个效果做的时候需要一点视觉审美给每张卡片预设一个 1 到 3 度的随机旋转角入场动画结束后再全部归零。这样滚动时画面会有一种“胶片咯咯作响”的感觉但文章信息不会因为旋转角度太大而读不了。最大的角度我控制在 3 度以内这是我在本地反复调整出来的临界值。4. 常见问题与调试实录4.1 3D 场景拖慢了首屏加载第一次上线时首页原始包体积接近 400KBLighthouse 的 Performance 得分掉到了 60 出头问题就在 Three.js 和 R3F 被一整个打进了主包。解决办法有两个动态加载只在页面挂载后才加载 Canvas 组件用next/dynamic包一层const Scene dynamic(() import(/components/canvas/Scene), { ssr: false, loading: () div classNamebg-[#0f0f14] /, });代码分割把 Canvas 拆成独立 chunk让它走单独的异步加载通道。经过这两步之后首屏包从 390KB 降到 210KB 左右Lighthouse 性能得分回到了 90 以上。4.2 动效在移动端掉帧桌面端跑得很顺的场景一上手机就卡。排查下来有几个元凶粒子数量过多我把粒子数量从 600 降到了 300肉眼几乎无感知功耗明显下降。backdrop-filter 使用过多给每张卡片都加磨砂效果导致滚动时大量图层合成计算。我把卡片磨砂去掉一半只保留导航栏。未处理visibilitychange用户切到后台时 Canvas 还在渲染。我在组件里加了监听器页面隐藏就暂停 requestAnimationFrame返回时再恢复。另一点很重要手机浏览器默认对wheel事件是像素级精确模拟ScrollTrigger 的scrub在手机上并不稳定。我的处理是判断matchMedia((pointer: coarse))如果是移动端就直接关闭 scrub 效果改用简单的 fade-in效果一样干净。4.3 字体加载导致的布局偏移超现实风格通常会用一些不那么常规的字体但字体加载前后字形宽度不一样导致滚动动画位置算错。我的解决方案是用next/font自托管字体它在构建时就生成了完整的字体文件并且自动加载font-display: swap。所有可能变动的容器都设置最小高度给布局占位。字体加载完成后执行ScrollTrigger.refresh()。这里有个细节如果用了可变字体构建时同时加载多个字重文件会变大。我实际只用了 Regular 和 Medium 两个字重避免不必要的流量消耗。4.4 SEO 与社交分享的坑因为首页有大量 WebGL 内容搜索引擎抓不到 Canvas 里的视觉信息所以 SEO 必须依赖语义化 HTML 和 meta 信息。我在首页标题下额外渲染了一个h1和一段对访问者可见的文字摘要让爬虫能读懂这个站是什么。每篇文章则单独渲染article结构包含headline、datePublished等结构化数据。另外我专门给 OG 图做了方案因为 Open Graph 抓图时不执行 JS动态生成的封面不会被收录所以我为每篇文章写了一个静态的 SVG 封面再在构建时转成 PNG作为og:image输出。这在社交平台上分享时效果很稳定不会出现“预览图空白”的尴尬。4.5 部署构建的内存溢出部署到 Vercel 时遇到了 Node 内存不够的问题日志里直接显示JavaScript heap out of memory。原因是构建时既要渲染文章列表页、详情页同时还要预生成 OG 图片内存叠在一起超了限制。后来我在package.json里改了构建命令{ scripts: { build: NODE_OPTIONS--max_old_space_size4096 next build } }顺便把 OG 图片生成也拆成了一个单独的脚本不占 Next.js 构建线程的同步内存。这样部署就很稳定没有再爆过。5. 复盘与可扩展方向5.1 性能数据与最终效果改造完成后的数据我记录了一下仅供参考指标改造前改造后首页 Bundlegzip390KB210KBLighthouse Performance6396LCP4G 模拟2.8s1.4s首页 3D 场景帧率iPhone 1342fps58fps这个提升不是靠删功能而是靠按需加载和使用更轻量的表现方式换来的。比如环境光替换掉 HDR 预设卡片磨砂改用半透明纯色都省下了大量 GPU 合成开销。5.2 这个项目后续还能怎么玩做完 Surreal_Blog 之后我想到了一些横向扩展方向如果你也想做一个类似项目可以试试作品集模式把博客的文章卡片替换成作品缩略图点击展开详情就是一个超现实风格的作品集。接入轻量 CMS比如用 Notion API 或 Sanity把 Markdown 文件换成数据接口方便多作者协作写稿。注意要保持静态输出逻辑不然随时可能被接口慢拖累。加入 WebGPU 着色器实验现在 WebGPU 支持度在逐步提升做一个实时流体背景或波动音浪会非常出效果但这是个耗电大户建议只在桌面端启用。做一套 Dashboard如果文章多可以做一个本地管理端支持草稿预览、标签管理和封面生成。我这个项目暂时不需要但如果你想做成多作者创作平台这是很必要的补充。5.3 最后分享一个我的经验Surreal_Blog 教会我最重要的一件事是做这种偏视觉的网站思维模式不能是“往页面上堆特效”而是“先用最少的元素制造一次情绪波动”。一个悬浮的球、一层胶片噪点、一次轻微的错位就够了。特效永远是手段阅读和情绪才是目的。当初我最想做的其实是一个充满扭曲变形的大爆炸开场动画但实际跑起来之后发现真正让人记住的反而是那个漂在首页角落、轻轻起伏的小球体和时间线卡片归位的瞬间。这种“少即是多”的判断比任何技术选型都更值得记下来。后续我还会继续优化这个项目比如把文章页的阅读进度做成一束流动的光线跟随滚动渐变颜色也可能给每篇文章生成一个独立的 3D “意象物”让读者点进去第一眼就被那种氛围抓住。超现实的可能性还有很多这个项目只是一个起点。
