我把《红楼梦》里的大观园,做成了一个能走进去的 3D 世界
作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界,把文本与空间放进同一窗口。项目整理了二十处景致,涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺,跟随第十七回贾政游园路线导览,或在漫步模式中自由行走,并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定,最终打包为约 2.7 MB 的 HTML 文件,离线也能体验,成为一份可交互、可行走的阅读批注。
作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界,把文本与空间放进同一窗口。项目整理了二十处景致,涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺,跟随第十七回贾政游园路线导览,或在漫步模式中自由行走,并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定,最终打包为约 2.7 MB 的 HTML 文件,离线也能体验,成为一份可交互、可行走的阅读批注。
创意新颖的 3D 大观园互动阅读项目,信息具体、体验可访问且时效性极强,但缺乏技术实现细节与深入分析。
作者整理了 20 种与动画、物理、3D、声音及交付相关的开源技能与工具库,涵盖 Remotion、HyperFrames、Anime.js、React Spring、PixiJS、p5.js、Paper.js、Matter.js、Three.js、Rapier、OGL、tsParticles、glTF Transform、GL Transitions、OBS Studio、Chatterbox、Tone.js、faster-whisper、OpenCut 和 FFmpeg。每个工具附有简介和 GitHub 链接,覆盖从视频渲染、动画编排、图形绘制到配音、字幕转录和视频编码交付的完整创作流程。
本文介绍了用AI开发小程序时如何补齐设计规范,解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解:确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈,以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑(规范与代码各改各的)的解决方法、维护流程和一段可直接使用的提示词,帮助AI持续按同一套规则产出页面。
文章以模拟的Punk咖啡馆点单小程序为例,图文讲解15个常见交互名词:导航栏、TabBar、页内Tabs、卡片、单元格、按钮、点击热区、表单校验、选择器、轻提示、对话框、操作面板、骨架屏、空状态与错误状态、无障碍。沿“选咖啡→选规格→加入购物袋→确认订单”的完整点单路径,说明每一步页面应有的回应,如选中状态、数量与总价更新、加载与失败提示等。最后强调提交后要区分等待、失败和结果不明三种情况,结合服务端幂等防止重复下单,并给出用AI按业务补齐交互的模板。
作者复盘了自己做过的40多个GitHub小项目(其中20个仍是0 Star),其中互动作品《清明上河图》获得5000多人次体验并得到OpenAI官方点赞。文章按项目类型详细分享了制作过程:清明上河图分段添加交互、邮票和夜景图像处理Skill、数学可视化页面、线上看展互动、口播动画等,讲述了灵感来源、与AI协作的提示方式、第一版后的迭代修改,以及从手稿、小流程、视觉规则到多端测试的七步可复用工作方法,鼓励持续做喜欢的小作品。
本文是 Vibe Coding 网页动效词典的下篇,从第 37 个词继续,涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效;数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效;布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例,最后介绍第四层 UX 规则(反馈、操作暗示等),帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
本文是一篇 Vibe Coding 网页动效教程(上篇),旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念,提出网页动效的四层结构:技术工具(CSS、Motion、GSAP、Three.js 等)、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式(悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时)及动效类型的基础部分(Easing、Duration 等),每个词条配有可直接使用的提示词示例,帮助读者清晰表达脑中的动效效果。
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻:高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻(WebGL+GLSL 技术栈)以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论,如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等,并分享核心提示词「一边参考原片一边修改直到近乎一样」,总结 AI 自查与人工定点反馈两种协作路径,附通用 Prompt 模板与止损建议,展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。