第1轮
一、网站说明
这是一个 创意数字视听代理商 (Creative Audiovisual Agency) 类型的网页 (Web版)。
该网站旨在通过极具视觉冲击力的互动体验，展示代理商在声音设计、数字艺术和品牌叙事方面的顶尖实力，转化追求先锋美学的品牌客户。

二、全局视觉风格

整体采用 “酸性平面主义 (Acid Brutalism)” 美学，强调极高对比度的视觉碰撞与原始的工业感。全站摒弃任何渐变色，仅使用纯色色块（#FFFFFF, #000000, #1A73E8 钴蓝, #32CD32 极光绿, #FF3D00 烈焰红）进行几何分割。字体选用超粗体几何无衬线体 (如 Monument Extended) 与精致的等宽字体 (如 JetBrains Mono) 形成层级对比。排版采用无边框设计，利用留白与极大的字号营造呼吸感，信息密度呈现“疏密交替”的节奏。图像处理风格为高对比度黑白摄影结合扁平化3D几何组件。响应式策略采用“模块化平铺”，在移动端将水平排列的色块转为纵向堆叠，确保视觉冲击力不减。

三、整体页面结构

网站采用 “非线性叙事结构”，由多个极具个性的全屏模块组成。模块间通过物理感极强的翻转、覆盖和拉伸进行过渡。首屏通过震撼的机械式动画建立品牌调性，中段通过高频触发的横向滚动与粘性布局展示案例，尾段则以极简的信息流引导转化。整体逻辑从“纯视觉震撼”到“作品集深度展示”，最后落地到“标准化服务清单”，通过动态节奏的快慢变化引导用户视觉焦点。

四、动效系统

物理翻转系统 (The Flip Engine)： 全站核心逻辑。文字、图片和色块在滚动或触发时，模仿物理实体（如翻转式告示牌或磁带盒）进行 180° 或 90° 的 3D 翻转。

粘性层叠滚动 (Sticky Layering)： 页面背景色块采用 sticky 布局，当下一模块上滑时，上一模块像被物理推动一样进行位移或重叠。

磁力交互 (Magnetic Interactivity)： 鼠标指针经过交互按钮或特定文字时，元素产生强烈的磁吸拉伸感，并触发反色预览效果。

字符序列加载 (String Stagger)： 所有大标题进入视口时，字符并非整体出现，而是通过快速变换随机字符最终定格为正确文案。

瞬时转场 (Hard-Cut Transitions)： 页面模块切换无淡入淡出，全部采用硬切或模拟磁带快进的抽帧视觉。

五、页面模块分析

1. 【HERO - 机械序章模块】

模块结构： 三层水平切割的独立翻转带。

布局方式： 全屏居中，三行巨大的标题文字垂直分布。

主要内容： 品牌主张文案 “ECHO / BEYOND / SENSES”。

交互或动效表现： 初始加载时，第一行黑白文字像翻牌器一样 3D 翻转出现；随后第二层“钴蓝色块”以 X 轴为中心翻转 180 度，反面显示文字“ON”；紧接着第三层“极光绿色块”同步翻转出文字“AIR”。鼠标移动时，三层色块会产生轻微的错位视差。

2. 【MANIFESTO - 品牌宣言跑马灯】

模块结构： 四层不同速度、不同方向的横向滚动文字带。

布局方式： 满屏铺开，斜向 15 度交叉布局。

主要内容： 循环滚动的关键词：“RAW ENERGY”, “DIGITAL PULSE”, “NOISY IDEAS”。

交互或动效表现： 文字带随滚动速度加减速。Hover 任意文字带时，该行速度翻倍并由空心字体变为实心色块。

3. 【PORTFOLIO - 案例视界模块】

模块结构： 非对称网格，大型黑白缩略图与高亮色块交替。

布局方式： 采用瀑布流布局，但每个案例卡片间距极巨。

主要内容： 案例名称（如 "NEON VOID", "SONIC ARCHIVE"）及沉浸式视频预览。

交互或动效表现： 滚动触发。当卡片进入中心区，图片会自动拉伸填充整个视口宽度，文字信息则以“打字机”效果在色块边角弹出。

4. 【CAPABILITIES - 矩阵式服务模块】

模块结构： 四个并列的垂直长条色块，代表四项核心服务。

布局方式： 底部对齐的等宽垂直排列。

主要内容： 1.音频交互；2.3D视觉；3.叙事创意；4.未来艺术。

交互或动效表现： 默认仅显示标题。当鼠标 Hover 到某一长条（如“音频交互”）时，该条色块迅速水平展开占据 70% 的宽度，内部弹出具体服务详情和设备列表，其余三条自动压缩。

5. 【TESTIMONIALS - 证言反馈墙】

模块结构： 巨大的浮动气泡，文字随滚动在空间中漂浮。

布局方式： 随机散点布局，打破常规栅格。

主要内容： 合作客户的评价简句。

交互或动效表现： 采用“果冻式”弹性动效，气泡间会发生物理碰撞。点击气泡会触发模拟磁带底噪的声音反馈。

6. 【FOOTER - 终章呼吁模块】

模块结构： 巨型动态交互按钮结合底部版权区。

布局方式： 极简布局，按钮占据屏幕 50% 面积。

主要内容： “START THE PROJECT” 动态文案。

交互或动效表现： 按钮是一个巨大的旋转 3D 立方体，每一面都是不同的联络方式。背景色在黑白之间高频闪烁（降低频率以防光敏不适），直到用户点击，整个页面像电视关机一样缩至中心一个光点消失。
-----

请开始执行任务，完成后请按规则向我汇报，只需向我汇报进度即可，无需等待我的确认指令。

资源引用： 图片请使用 Unsplash 或占位图服务，图标使用 Lucide / Heroicons (SVG 代码)，确保仓库不依赖本地不可复用的资源。

请开始遵照上述每一项要求进行设计，并实时更新Task Todo List以备我可以实时监控完成情况，整个过程无需我确认是否进行下一步，你只需按任务列表逐步完成，直到整个任务全部完成即可，直接生成一个完整的html文件，所有的html、js、css全部写在一个html文件中

由于文件较大，请分多次写入：
1. 第一次创建文件并写入前半部分
2. 后续使用追加模式写入剩余内容
3. 每次写入不超过 100 行代码

第2轮
...我要的是白色系的！你又给我搞这种全黑的干什么

第3轮
你搞清楚，首屏上方不是只有一个ECHO，而是他本身就是一个纯白色3D div容器，下面那个BEYOND和SENSES也是一样，都是一个3D div容器，四面都有颜色，这样才能看到真正的3D翻转效果

第4轮
你这个3D盒几个面的位置和长宽没有算好啊，好好做！直接参考下面的cube啊

第5轮
上下两个面都不知道飞到哪里去了

第6轮
1、首屏的白色部分，是左右两个各一个单词，第二个是BEYOND在左边，第三个是SENSES在右边；2、CAPABILITIES部分是点击才展开对应的

第7轮
。。。你听不懂人话吗，谁让你改布局了，我让你第一个card-box是左右两边各一个单词，第二个card-box是BEYOND文字在左边，宽度还是撑满！，第三个card-box是SENSES文字在右边！给我恢复原来的布局！

第8轮
。。恢复原来的颜色啊，怎么变成全白了！

第9轮
下面的cube盒子挡住他的title了！还有，点击后给点实际的东西，不要回到顶端

第10轮
还是挡住title，你把title往上移啊,然后SEND按钮点击后给点状态

第11轮
还是挡住title，你把title往上移啊,然后SEND按钮点击后给点状态

第12轮
https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1200&h=600&fit=crop这张图看不了，修复

第13轮
继续

第14轮
继续

