#角色
你是一位精通 Canvas 动画、Web Audio API 和 CSS3 高级特性的前端创意开发专家。
#目标
编写一个单文件 HTML，实现一个极简、优雅且具有物理交互感的日式玻璃风铃窗景小组件。
#核心需求
- 核心视觉与结构设计
- 风铃形态设计：
造型：必须塑造出经典的日式江户风铃外观，即倒扣的半球形，顶部圆润，底部平滑内收。严禁使用简单的圆柱体或完美的圆形，要体现出手工吹制玻璃的自然弧度，一排共五个风铃。
材质：通过背景模糊滤镜配合半透明的白色背景，模拟出带有微磨砂感和高光反射的清透玻璃质感。
短册（纸片）连接结构：
连贯性：纸片必须被视为风铃整体的一部分，严禁出现视觉上的断裂。
层级关系：构建清晰的层级结构。每个风铃单元应包含挂绳和铃铛主体；铃铛内部悬挂铃舌（或珠子）；最关键的是，纸片容器的锚点必须精确固定在铃舌珠子上，并通过一根细长的连接线自然垂下，确保视觉上纸片是从珠子延伸出来的。
-
物理与动画逻辑
双摆物理模拟：
一级摆（铃铛）：仅允许铃铛在二维平面上进行左右摆动。严禁对铃铛主体施加三维翻转（如 X 轴或 Y 轴旋转），以防止铃铛在摆动时因透视关系变扁，破坏球体体积感。
二级摆（纸片）：纸片应作为二级摆动系统，其运动角度需滞后于铃铛，形成自然的惯性拖尾效果。
纸片三维飘动：为了模拟风吹时的轻盈感，仅对下方的纸片部分应用 Y 轴旋转和倾斜变形，使其看起来在风中自由翻转。
环境风场：利用时间正弦波叠加随机相位来模拟自然微风，确保风铃在没有交互时也能保持轻微的“呼吸感”晃动。
交互反馈：当鼠标划过风铃区域时，根据距离计算力度，赋予风铃水平方向的速度增量。 -
沉浸式环境系统
平滑天气过渡：
双缓冲背景机制：严禁通过直接切换颜色来改变背景。必须创建两个绝对定位的背景层，利用透明度属性进行长时长的交替渐变，实现电影级的无缝淡入淡出效果。
元素进出：在切换天气时，旧的云朵或天体应缓慢淡出，新元素延迟淡入，避免突兀的跳变。
自动轮播：设定每 6 秒自动在晴、阴、雨、雪、夜五种天气模式间平滑循环。
粒子特效：使用 Canvas 在最上层绘制相应的天气粒子，如细腻的雨丝、飘落的雪点或呼吸闪烁的星光。 -
音频设计
原生音频合成：
利用 Web Audio API 的振荡器实时生成声音，不依赖任何外部音频文件。
音色调制：使用正弦波作为基频，叠加一个频率约为基频两倍的泛音，以模拟水晶或玻璃碰撞时的清脆质感。
动态包络：设置极短的起音时间和较长的衰减时间，还原风铃声音清脆且余音悠长的物理特性。 -
代码质量约束
文件形式：所有代码（HTML, CSS, JS）必须封装在唯一的 HTML 文件中。
美学比例：风铃整体视觉应小巧精致，挂绳要细长，保持画面有充足的留白。
布局对齐：使用弹性布局或绝对定位，确保风铃挂绳垂直且精准地对齐窗框顶部。
日式风铃提示词