Scrollytelling

滚动叙事组件配方

组件变体

inline-flex items-center gap-2 font-semibold rounded-md transition-all duration-200 ease-out active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2F6FED]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0E1116] bg-[#2F6FED] text-white hover:bg-[#2560d4]

button

按钮

Signal-blue step button with a visible focus ring

基础骨架: inline-flex items-center gap-2 font-semibold rounded-md transition-all duration-200 ease-out active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2F6FED]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0E1116]
变体: 主要、警示、幽灵
状态: hover

card

卡片

Step narration block with index and current-step accent rail

基础骨架: relative border-2 border-[#2F6FED] rounded-none pl-6 py-4 bg-transparent
变体: 步骤、面板
状态: hover

input

输入框

Dark-field input with a blue focus ring

基础骨架: bg-[#1C2530] border border-white/10 rounded-md px-4 py-2.5 text-[#F7F5F0] placeholder-[#F7F5F0]/30 focus:outline-none focus:border-[#2F6FED] focus:ring-2 focus:ring-[#2F6FED]/30 transition-all duration-200
变体: 默认、幽灵
状态: focus