叙事驱动Storytelling-Driven
按章节推进：每屏一个情绪节点，用滚动触发揭示、配图与渐变过渡串联。适合讲一个完整故事，需要强内容策划支撑。
典型场景品牌官网 · 公益传播（已弃用）
编号27
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
按章节推进：每屏一个情绪节点，用滚动触发揭示、配图与渐变过渡串联。适合讲一个完整故事，需要强内容策划支撑。
关键词
Narrative flowvisual story progressionsection transitionsconsistent character/brand voiceemotional messagingjourney visualization
效果与动效
Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative
设计系统变量
--section-min-height100vh--reveal-duration600ms--narrative-fontserif--chapter-spacing8rem--timeline-coloraccent--parallax-speed0.5配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety
辅色 / Secondary
Story section color coding, emotional state colors (calm, excitement, success), transitional gradients
强调色在页面底色上的对比度约 4.9:1，可用于正文与图标。
适用场景
适合 / Best For
- Brand/startup stories
- mission-driven products
- premium/lifestyle brands
- documentary-style products
- educational
避开 / Do Not Use For
- Technical/complex products (unless narrative-driven)
- traditional enterprise software
框架兼容
tailwindbootstrap
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本中animation / blur
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Story flows naturally,
- Scroll reveals smooth,
- Sections timed well,
- Emotional hooks present,
- Mobile story readable,
- Skip option available
CSS / 技术关键词
scroll-snap sections, Intersection Observer for reveals, parallax backgrounds, section transitions, timeline CSS, narrative typography (varied sizes), image-text alternating
该条目在上游数据中标记为已弃用，插件检索默认排除；查询中包含
legacy 或 deprecated 时才会召回。AI 提示词
Design a storytelling landing page. Use: narrative flow sections, scroll-triggered reveals, chapter-like structure, emotional imagery, brand journey visualization, founder story, mission statement, timeline progression.