网站模板产品系统Vibe Coding

【立项原因】中小型公益组织、高校支教团与学生社团普遍没有技术开发能力，却急需一个展示团队故事、支教成果并承载志愿者招募的线上门面；传统建站外包报价数千元、周期以周计，且每次改字换图都要再求人。【业务场景】每年暑期支教季前后，各团队需在线发布队伍介绍、项目进展、历年足迹与报名入口，在朋友圈和微信群传播引流。本模板即改即用、零部署门槛，专门解决公益团队"建站贵、改稿难、传播弱"的问题。

①英雄首屏：SVG 线稿旭日双环光线旋转、三层视差山峦、飞鸟掠过、滚动提示；②关于我们：手绘线稿插画（树下读书场景）逐笔描线动画；③项目介绍：四宫格卡片悬浮抬升、描边变色、金色尾线延展；④发展历程：滚动驱动生长的渐变时间线与节点光晕；⑤成果数据：滚入视口自动数字滚动计数；⑥志愿者心声：无缝跑马灯轮播，悬停暂停；⑦招募行动区：四步报名流程引导与邮件联系按钮。全站自适应手机/平板/桌面，含纸张噪点质感、浮动金色光尘粒子、平滑锚点导航、按钮填充微交互与滚动进场动画。

个人独立完成视觉设计、中文文案撰写、全部前端编码、矢量插画绘制与动效调优，一人交付全流程。【技术栈与亮点】原生 HTML5 + CSS3 + JavaScript，无框架、无构建步骤，单文件约 43KB 即整站交付；内联 SVG 插画、零位图依赖，离线双击即可打开。亮点难点：①基于 stroke-dasharray 与 getTotalLength 的 SVG 路径逐笔描线动画；②IntersectionObserver 驱动进场揭示与数字计数；③三层山峦滚动视差 + 鼠标微视差；④Canvas 光尘粒子系统；⑤以 CSS/SVG feTurbulence 实现纸张噪点。性能上坚持 transform/opacity 动画与 passive 滚动监听，保证低端手机流畅。