Lenticular Carousel

零依赖 vanilla JS

3D 光栅画微透镜折射与全息彩虹渐变高光交互

鼠标在卡片上由左至右平移体验竖条与彩虹光斑动态变化点击两侧卡片可居中切换

效果参数实时调试面板 (Props Live Tuner)

实时调试全部效果参数并即时预览视觉呈现

预设:

strips (竖条数量) 56

柱面微透镜光栅条纹数量

foil (彩虹全息强度) 0.50

薄膜干涉彩虹光谱高光亮度

foilTilt (彩虹倾斜角度) 30°

彩虹光束倾斜角度（0=水平，90=竖直），鼠标只平移不旋转

blur (彩虹高光模糊度) 36px

高斯柔化扩散与色散边缘羽化

ridge (棱镜边缘反光) 0.50

光栅竖条边缘微镜面反射亮度

refraction (折射位移) 0.32

光线穿过微透镜时的折射与色散

tilt (3D 倾斜角度) 14°

跟随鼠标的最大3D旋转倾角

lift (Z轴悬浮抬升) 40px

激活卡片向屏幕前方的抬升距离

stripes shift (动态宽度) 0.45

鼠标左右移动时光栅条纹宽度拉伸

inactiveDim (非焦点暗度) 0.55

两侧未激活卡片的亮度系数

动效原理剖析与模块用法

为什么会出现竖条和彩虹高光？如何直接用于项目？

1. 灰色蒙层条的物理本质：微透镜竖纹光栅玻璃

这些灰色蒙层竖条本质上就是一层微型柱面透镜阵列（Reeded / Lenticular Fluted Glass）。
• 静止态（未悬停）： 灰色蒙层依然存在，但处于高透明度的轻微纹理状态（近乎隐形，只保留一层高雅的物理玻璃微反光）。
• 文字在玻璃下方： 文字本身并无竖线，是位于竖纹玻璃下方的独立内容，其可见度直接受光栅玻璃的开合折射控制。

2. 两侧自然隐匿与高斯柔化漫射彩虹光斑（Foil Diffusion & Edge Falloff）

• 两侧自然隐匿（Edge Falloff）：在物理光栅中，只有观察视角落在镜面反射与布拉格衍射窗口中心区域（偏角较小）时彩虹才最亮。当鼠标游移到卡片两侧边缘时，衍射光线不再折射进人眼，彩虹会自动平滑淡出至完全隐匿（近乎看不见），保留纯粹真实的玻璃质感。
• 高斯柔化漫射（Gaussian Blur）：圆柱微透镜对薄膜干涉彩虹光谱具有强烈的焦外漫射虚化效果，彩虹各色谱之间不存在生硬色块边界，而是通过高斯模糊与多层羽化扩散（36px+ Blur）柔和交融，形成通透柔美的全息极光感。

3. 鼠标左右平移时竖条宽度与文字展示的动态律动

这正是光栅画“翻转透光”最精妙的核心光学效应：
• 鼠标在左侧： 左侧光栅条纹由于观察视角斜切被极端压缩变窄，透镜“闭合”，下方的文字被重度遮蔽压缩，因而几乎看不见。
• 鼠标向右平移： 光线入射角随之推展，右侧蒙层竖条逐渐放宽展开，透光孔径打开，文字得以自然展开并完整清晰呈现。

动效模块与布局模块可独立使用，也可组合成轮播

import { LenticularCard } from './src/lenticular-card.js';
import { Carousel } from './src/carousel.js';

// 1. 动效模块：创建一张光栅画卡片（自包含，可脱离轮播独立使用）
const card = new LenticularCard({
  image: 'assets/cards/concrete-chorus.jpg',
  tag: 'REPETITION',
  title: 'Concrete Chorus',
  description: 'Austin, Texas',
  params: { strips: 56, foil: 0.5, blur: 36, ridge: 0.5, refraction: 0.32, tilt: 14, lift: 40, warping: 0.45, foilTilt: 30 },
  onHover: (hovered) => console.log('hover:', hovered),
  onActivate: () => console.log('clicked'),
});
document.body.append(card.element);

// 2. 布局模块：通用轮播（不关心卡片内部是什么效果）
const carousel = new Carousel({
  track: document.getElementById('carousel-track'),
  dots: document.getElementById('pagination-dots'),
  prevButton: document.getElementById('prev-card-btn'),
  nextButton: document.getElementById('next-card-btn'),
  inactiveDim: 0.55,
  onChange: (i) => console.log('active:', i),
});
carousel.add(card.element);

// 3. 实时调参 / 分解视图 / 切换 / 销毁
card.setParams({ foil: 0.9 });
card.setExploded(true);
carousel.setActive(1);
carousel.setInactiveDim(0.4);
card.destroy();