声音暴力
项目将日常中被忽视的噪声、信息和语言压迫归纳为“声音暴力”，用网页体验让这些隐性压力从抽象感受变成可被观看的数字痕迹。
Interactive Website / Graduation Project
Audible Welts
勒痕可闻
一件基于声音媒介的数字交互网页作品。项目以“声音暴力”为切入点，把城市噪音、信息轰炸与语言压迫转译为可被看见、触发和抚平的数字伤痕。
Project Statement
把不可见的听觉压迫，转译成可感知的网页叙事。
《勒痕可闻》关注数字时代青年群体长期承受的隐性声音压力：城市交通、通知轰炸、短视频音频、语言攻击与内在心理回响。作品不把声音当作背景音乐，而是把它作为叙事核心，让声音频率实时牵动画面撕裂、扫描线错位和 RGB 通道偏移。
城市青年
目标受众是 18 至 30 岁的城市青年。他们熟悉数字媒介，也长期处在通勤噪声、学习工作压力和网络信息过载之中。
感官联觉
作品用通感方式把听觉压力转译为视觉故障：低频轰鸣影响画面呼吸，高频尖刺触发撕裂、色散、颗粒和 CRT 变形。
六幕下坠叙事
作品放弃多页面跳转，采用自上而下的垂直坠落体验。六个场景从物理噪声逐步走向心理封闭：前五幕噪音逐层堆叠，第六幕突然进入死寂，用反差表达“沉默也可能是一种压迫”。
Act 01
交通侵蚀
高架桥、车流和低频引擎声构成开篇，画面边缘随声音轻微呼吸，表现日常噪音对心理边界的慢性侵蚀。
Act 02
时钟绞杀
齿轮、表盘与滴答声强化时间焦虑，鼠标速度越快，CRT 扫描线和视觉焦点抖动越明显。
Act 03
冗余尖叫
信息提示、碎片内容与高频噪声叠加，模拟网络信息过载造成的感官拥堵。
Act 04
噪音断裂
画面进入更强烈的撕裂和断层状态，声音与视觉共同表现心理防御被噪声穿透的瞬间。
Act 05
警笛轰鸣
声音强度达到峰值，警报、色散和强对比画面将压迫感推向最高的物理噪声阶段。
Act 06
溺于死寂
所有轰鸣被切断，只留下深水底噪。用户需要亲手抚平扭曲声波，完成从崩溃到释然的释放动作。
Interaction System
交互与技术结构
Three.js 视差空间
将手绘资产、UI 和视频素材拆成前景、中景、背景三层纹理，沿 Z 轴分布在透视相机中，模拟向下坠落时的空间纵深。
GSAP 下坠导航
用滚轮与触控板作为主操作，基于速度阈值触发场景推进，避免额外 UI 控件打断沉浸感。
Web Audio 音画联动
提取多轨音频的低、中、高频段数据，并映射到画面扭曲、滤镜强度、扫描线错位和 RGB 偏移。
CRT 故障着色器
通过颗粒、扫描线、色散和屏幕撕裂，把听觉压力转化为“看得见的数字伤痕”。
Visual Output
从网页体验延展到展览物料。
海报与展板不作为孤立图片硬塞入页面，而作为项目输出的一部分，放在网页案例的后段，用更克制的留白承接前面的交互叙事。
Final Output
项目产出
- 完成一套基于声音媒介的沉浸式交互网页，包含六幕情绪递进场景。
- 建立“声音频率 → 视觉故障 → 情绪反馈”的音画联动系统。
- 形成网页作品、演示视频、项目海报和毕业设计展板等完整展示物料。
- 项目也暴露出实时滤镜、高清资源预加载和移动端性能优化方面的后续迭代空间。