自主运营

Prompt

将此页面重建为单个自包含的 index.html 文件——像素级忠实还原 Falcon AI Operations Overview 三联画。不得使用框架、外部 CSS/JS/字体/图片。仅使用系统字体。浅色配色方案。桌面端所有尺寸均使用相对于尺寸容器的 CSS 容器查询单位（cqw/cqh）。

════════════════════════════════════════
页面元信息与启动
════════════════════════════════════════
- <!doctype html>, lang="en"
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
- color-scheme: light
- title: Falcon AI Operations Overview
- 在样式之前放置内联 head 脚本：
  - 如果 prefers-reduced-motion 不是 reduce，且 Element.prototype.animate 存在：
    - 在 <html> 上添加类 "entrance-pending"
    - 设置 window.__entranceFallback = setTimeout，在 3000ms 后移除 "entrance-pending" 和 "entrance-active"
  - 否则不执行任何操作（页面完全可见）

════════════════════════════════════════
设计令牌（:root）
════════════════════════════════════════
--aspect: 1.5204255          （保留；布局计算不需要）
--page: #f0f0f0
--surface: #fff
--panel: #fffaf6
--ink: #282828
--muted: #777
--orange: #ff6900
--orange-soft: #ffdfca
--green: #4d8c35
--weight-regular: 400
--weight-body: 475
--weight-medium: 500
--weight-semibold: 600
--weight-display: 600
--weight-card-title: 600
--weight-bold: 700
--card-title-size: 1.86cqw
--card-title-tracking: -.125cqw
--feature-title-size: 2.17cqw
--feature-title-tracking: -.09cqw
--cards-height: 33.81cqw
--cards-scale: min(1, calc(60cqh / var(--cards-height)))

════════════════════════════════════════
字体（精确堆栈——无 webfonts）
════════════════════════════════════════
正文／大部分 UI：
  "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif
  weight: --weight-regular；antialiased；text-rendering: geometricPrecision

卡片标题（.card-copy）：
  "Segoe UI Semibold", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif

卡片正文段落：
  "Segoe UI Variable", "Segoe UI", Arial, sans-serif

════════════════════════════════════════
全局布局
════════════════════════════════════════
html, body：width/height 100%；margin 0；overflow hidden；background --page
body color --ink
.viewport：position fixed；inset 0；overflow hidden；bg --page
.scene：absolute inset 0；overflow hidden；container-type: size；bg --page

.cards（桌面端三联画）：
  position absolute；top/left 50%；translate -50% -50%
  width: 81.71cqw；height: var(--cards-height)
  display grid；grid-template-columns: 32.33% 32.33% 31.70%
  justify-content: space-between；align-items: start
  scale: var(--cards-scale)   ← 当 viewport 较矮时缩小整个构图

════════════════════════════════════════
卡片外壳
════════════════════════════════════════
.card：
  relative；width 100%；height 100%；overflow hidden
  display grid；grid-template-rows: 72.2% 27.8%   ← panel／copy 分区
  border: .075cqw solid rgb(255 233 218 / 96%)
  border-radius: 1.59cqw
  background: --surface
  box-shadow:
    .32cqw 1.18cqh 1.42cqw rgb(44 35 29 / 11%),
    0 .18cqh .42cqw rgb(44 35 29 / 3.5%)

.card:last-child（第 3 张／Faster Decisions）：
  height: 98.5%；margin-top: .76%

.panel（上部视觉区域）：
  relative；margin-inline: 2.55%；overflow hidden
  border-radius: 1.28cqw 1.28cqw 1.08cqw 1.08cqw
  background:
    radial-gradient(circle at 50% 78%, rgb(255 225 207 / 30%), transparent 47%),
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 248 243 / 94%))

.card:last-child .panel：
  margin-inline: 2%
  background:
    radial-gradient(circle at 74% 46%, rgb(255 225 204 / 70%), transparent 48%),
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 242 232 / 97%))

.card-copy：
  relative；padding: 7.1% 8.4% 6.5%
  h2：margin 0 0 1.6%；color #292929；font-size --card-title-size；weight --weight-card-title；
       line-height 1.04；letter-spacing --card-title-tracking；white-space nowrap；
       transform: translateY(-.36cqh)；transform-origin left top
  .card:last-child h2：font-size --feature-title-size；letter-spacing --feature-title-tracking
  p：margin 0；color --muted；font-size 1.39cqw；weight --weight-medium；
     line-height 1.04；letter-spacing -.06cqw；
     transform: scaleX(.94)；transform-origin left top
     （使用 <br> 精确换行，文案见下文）

.corner-icon：
  absolute；right 8.4%；bottom 22.5%；width 8.2%；aspect-ratio 1
  display grid；place-items center；border-radius 50%
  background --orange-soft；color --orange

入场隐藏：.entrance-pending .card { opacity: 0 }
减少动态效果：.entrance-pending .card { opacity: 1 }
.entrance-active 在 .card、.panel、.card-copy、h2、p、.corner-icon 上应用 will-change

════════════════════════════════════════
DOM 结构（精确顺序与文案）
════════════════════════════════════════
main.viewport[aria-label="Falcon AI operations overview"]
  section.scene
    section.cards[aria-label="Product benefits"]

      /* 卡片 1 — 即时可见性 */
      article.card
        .panel[aria-label="Visibility timeline chart"]
          .timeline：span "06 AM" + i + span "12 PM" + i + span "06 PM"
          .bars[aria-hidden="true"]：24 个 <i class="bar">，--h 高度为：
            20%,33%,48%,56%,51%,47%,39%,31%,53%,55%,60%,56%,
            然后 .bar.active 100%，再依次为 92%,76%,67%,62%,65%,59%,70%,74%,87%,83%,77%
          .value-chip："$4.7M"
          .axis：START | ACTIVE | PEAK | COMPLETE
        .card-copy
          h2：即时可见性
          p：实时掌握各项<br>运营数据。
          span.corner-icon > i.spark

      /* 卡片 2 — 自主工作流（居中／产品锚点） */
      article.card
        .panel
          .assistant-head：span.badge > i.spark  +  span "Falcon AI"
          p.question：我能如何帮你实现自动化？
          .prompt（div）：在 WebFlow 中捕获新潜在客户时，<br>在 HubSpot 中创建交易，并在 Slack 上通知销售<br>团队。
          .automate：
            span.automate-label：自动化
            canvas.magic[data-sparkle-icon][aria-hidden]
          i.cursor[aria-hidden]
        .card-copy
          h2：自主工作流
          p：使用 Falcon AI 自动化<br>业务流程。
          span.corner-icon > i.flow-icon

      /* 卡片 3 — 更快决策 */
      article.card
        .panel
          .metric：
            .metric-label：节省时间
            .metric-row：strong "128 Hrs" + span "↑ 18% 效率"
          canvas.decision-flow[data-flow-chart][aria-label="Decision paths converging into an optimized result"]
          .tag.action：操作：批准
          .tag.confidence：决策置信度：98%
          .tag.path：路径优化：+14.2%
        .card-copy
          h2：更快决策
          p：将洞察即时转化为<br>行动。
          span.corner-icon > i.speed

════════════════════════════════════════
卡片 1 — 可见性图表细节
════════════════════════════════════════
.timeline：absolute top 5.7% left 20.8% width 58.4%；flex；space-between；align center
  color #f27624；font-size .62cqw；weight medium；letter-spacing -.015cqw
  i：width 20%；border-top .05cqw dashed rgb(190 139 96 / 70%)

.bars：absolute left/right 5.9%；bottom 12%；height 62%；flex；align flex-end；space-between
.bar：width 2.4%；height var(--h)；border-radius 999px；bg rgb(255 219 196 / 64%)
.bar.active：width 2.6%；bg --orange；box-shadow 0 0 .28cqw rgb(255 105 0 / 24%)

.value-chip：absolute top 15.5% left 46.2% width 14% height 7.6%
  grid place-items center；border .12cqw solid #fff；radius 999px；bg --orange
  shadows：0 0 0 .055cqw --orange, 0 .28cqh .4cqw rgb(69 38 18 / 24%)
  color #fff；font .67cqw；weight semibold

.axis：absolute left 7.7% right 7.2% bottom 5.2%；flex space-between
  color #888；font .57cqw

.spark（corner + badge 基础样式）：relative width 52% aspect-ratio 1
  ::before 横条：top 41% left 0 width 100% height 18%；radius 999px；bg currentColor
  ::after 竖条：top 0 left 41% width 18% height 100%；radius 999px；bg currentColor
  （= 加号／闪光字形）

════════════════════════════════════════
卡片 2 — 工作流／助手细节
════════════════════════════════════════
.assistant-head：absolute top 8.2% left 6.2%；flex；align center；gap 1.02cqw
  color --orange；font 1.28cqw；weight bold；letter-spacing -.04cqw
  .badge：2.16cqw 正方形圆形；bg --orange-soft；grid center
  badge 内的 .spark（覆盖）：width 48%；bg currentColor；filter blur(.035cqw)；
    clip-path polygon 8-point star：
      47% 0, 53% 0, 58% 28%, 65% 35%, 72% 42%, 100% 47%, 100% 53%,
      72% 58%, 65% 65%, 58% 72%, 53% 100%, 47% 100%,
      42% 72%, 35% 65%, 28% 58%, 0 53%, 0 47%, 28% 42%, 35% 35%, 42% 28%
    ::before/::after content: none

.question：absolute top 21.5% left 6.2%；margin 0；color #151515
  font 1.34cqw；weight medium；line-height 1；letter-spacing -.07cqw

.prompt：absolute top 32% left 6.2% width 87.2% height 35.8%
  padding 4.7% 4.2%；border .06cqw solid #beb4ae；radius .86cqw
  bg rgb(255 255 255 / 32%)；color --muted
  font 1.03cqw；weight --weight-body (475)；line-height 1.31；letter-spacing -.035cqw

.automate（CTA 胶囊按钮）：absolute top 78.1% left 6.2% width 34.6% height 11.6%
  flex；align center；justify space-between；padding-inline 1cqw；radius 999px
  background: linear-gradient(100deg, #ff9b5b 0%, #ff8840 38%, #ff6b05 100%)
  box-shadow:
    0 .6cqh 1.35cqw rgb(255 105 0 / 52%),
    0 .2cqh .46cqw rgb(255 105 0 / 31%),
    0 0 .82cqw .08cqw rgb(255 118 30 / 24%)
  color #fff；font .98cqw；weight body；line-height 1
  .automate-label：letter-spacing -.025cqw；transform scaleX(1.03)；origin left center
  canvas.magic：flex 0 0 auto；width 1.5cqw；height 1.46cqw；translateX(-.15cqw)

.cursor：absolute top 85.7% left 54% width 4.3% aspect-ratio .72；z-index 3；isolation isolate
  filter: drop-shadow(0 0 .075cqw #fff) ×2 + drop-shadow(.08cqw .16cqw .08cqw rgb(0 0 0 / 48%))
  ::before：inset 0；bg #050505；clip-path polygon(0 0,94% 62%,57% 67%,38% 100%)
  ::after：inset -11%；z-index -1；bg #fff；使用相同 clip-path（白色轮廓）

.flow-icon（corner）：width 54% height 58%
  bg linear-gradient(--orange,--orange) center / 48% 18% no-repeat（横条）
  ::before/::after：竖向圆角条，width 34% height 70% bg --orange
    before：left 4% top 24%；after：right 4% top 6%
  （= 风格化的“流程／分支”字形）

════════════════════════════════════════
卡片 3 — 决策／指标细节
════════════════════════════════════════
.metric：absolute top 7.8% left 5.2%
  .metric-label：mb .38cqh；color #676767；font .88cqw；weight body
  .metric-row：flex；align center；gap 1.02cqw
  strong：color --orange；font 2.1cqw；weight bold；lh .95；tracking -.04cqw
  span：mt .52cqh；color --green；font .93cqw；weight bold；tracking -.045cqw

.decision-flow canvas：absolute top 39% left 0 width 100% height 53%；display block；pointer-events none

.tag：absolute z-index 2；height 8.3%；grid center；radius 999px
  bg rgb(255 255 255 / 95%)；color #282828；font .62cqw；weight semibold；tracking -.012cqw
  .tag.action：      top 34.8%；right 8%；width 28%
  .tag.confidence：top 67%；left 6%；width 40%
  .tag.path：       top 82.2%；right 8%；width 37%

.speed（corner 闪电）：width 58% aspect-ratio 1
  通过 multi-background 绘制三条橙色横条：
    linear-gradient(--orange,--orange) 0 31% / 27% 8% no-repeat,
    linear-gradient(--orange,--orange) 0 49% / 38% 8% no-repeat,
    linear-gradient(--orange,--orange) 0 67% / 22% 8% no-repeat
  ::before：inset 4% 1% 2% 28%；bg --orange；
    clip-path polygon(58% 0,100% 0,69% 40%,94% 40%,28% 100%,44% 58%,7% 58%)
  ::after：content none

════════════════════════════════════════
CANVAS 1 — 闪光图标（Automate 按钮）
════════════════════════════════════════
ResizeObserver 重绘 [data-sparkle-icon]。支持 DPR 的 canvas 尺寸设置。
数据（冻结）：
  sparkles: [{x:.01,y:.01,size:.50}, {x:.28,y:.26,size:.72}]
  sparklePoints（单位星形）：
    [.50,.06],[.59,.41],[.94,.50],[.59,.59],[.50,.94],[.41,.59],[.06,.50],[.41,.41]
绘制每个 sparkle：
  size = min(w,h) * sparkle.size；按照 canvas 边界的 x/y 偏移
  将 sparklePoints → 绝对坐标点
  roundedPolygon(points, roundness .34)：对每个角，从第一个角的 after-point 开始 move to，
    随后对每个后续点执行：lineTo(before) + quadraticCurveTo(point, after)，闭合路径
  fillStyle rgba(255,220,202,.55)；strokeStyle #fff
  lineWidth max(1.1, size*.15)；lineCap/Join round
  shadowColor rgba(255,255,255,.78)；shadowBlur size*.06；填充并描边；清除阴影

════════════════════════════════════════
CANVAS 2 — 决策流程图
════════════════════════════════════════
ResizeObserver 重绘 [data-flow-chart]。支持 DPR。

Bands（从左至右填充的 bezier ribbons），source/target 为高度比例的 [top,bottom]：
  {source:[.08,.26], target:[.29,.32],  color:'rgba(255,189,144,.60)'}
  {source:[.23,.42], target:[.30,.335], color:'rgba(255,149,80,.70)'}
  {source:[.50,.75], target:[.32,.355], color:'rgba(255,136,64,.82)'}
  {source:[.69,.98], target:[.33,.365], color:'rgba(255,181,128,.54)'}
  {source:[.39,.51], target:[.31,.345], color:'rgba(255,105,0,.96)'}  ← 最亮核心

flowShape：sourceHold .38，targetApproach .74，threadWidth .00135
Band 路径：move(0, h*sourceTop) → cubic(w*sourceHold,h*sourceTop, w*targetApproach,h*targetTop, w,h*targetTop)
  → line(w,h*targetBottom) → cubic 返回 (0,h*sourceBottom) → close → fill

Threads（叠加于顶部的白色描边）：
  {source:.05, target:.30,  alpha:.68}
  {source:.20, target:.315, alpha:.60}
  {source:.62, target:.342, alpha:.84}
  {source:.82, target:.352, alpha:.74}
  {source:.97, target:.36,  alpha:.64}
lineWidth max(.72, w*threadWidth)；strokeStyle rgba(255,255,255,alpha)
使用与 band 边缘相同的 bezier 控制点（sourceHold / targetApproach）

视觉效果：五条橙色 ribbons 从左侧扇形汇聚成右侧的紧密节点；白色细线沿 ribbons 延伸。

════════════════════════════════════════
入场动画（Web Animations API——精确编排）
════════════════════════════════════════
仅当 html 带有 entrance-pending 且 !window.__entranceStarted 时执行。
设置 __entranceStarted = true。
两次 rAF 后：

1) 测量与 viewport 相交的可见 cards。
2) 检测 singleRow：所有可见 cards 的顶部与最上方顶部之间的差值不超过 max(4, height*0.04)。
3) 顺序：
   - singleRow（桌面端）：先显示 centre card index===1，再按距 viewport 中心的绝对距离排列其他卡片
   - 否则（平板／手机）：先按 top、再按 left 排序
4) compact = viewport.width <= 512
   rise = compact ? 11 : 16
   easings：easePlace = cubic-bezier(.16,1,.3,1)；easeWipe = cubic-bezier(.24,.86,.28,1)

每张 card 的 delays：
  singleRow：primary（index 1）delay 60；其他为 245 + (order-1)*85
  stacked：70 + order*115
  drift（仅 singleRow 的非 primary）：-sign(centreOffset) * min(width*0.018, 7)
  否则 drift 0

每张 card 分四层（fill: both）：
  SURFACE .card：
    from {opacity:0, transform: translate3d(drift, rise, 0) scale(.985)} → {opacity:1, transform:none}
    duration compact?780 : (primary?960:900)；delay；easePlace
    注意：card 上不使用 clip-path（否则会裁切 shadow）

  PANEL .panel：
    from {opacity:0, transform:scale(.994), clipPath: inset(0 0 {compact?26:34}% 0)}
    → {opacity:1, transform:none, clipPath:inset(0 0 0 0)}
    duration compact?620:720；delay+200；easeWipe

  COPY .card-copy：
    from {opacity:0, transform: translate3d(0, compact?8:11, 0)} → none
    duration compact?540:620；delay+330；easePlace

  HEADING / DESCRIPTION（仅 clip 揭示——不要 transform 它们；保留已编写的 transforms）：
    from {opacity:0, clipPath: inset(-30% 0 100% 0)} → {opacity:1, clipPath: inset(-30% 0 -30% 0)}
    heading：delay+350；duration compact?470:540；easeWipe
    description：delay+450；duration compact?430:490；easeWipe

  ACCENT .corner-icon：
    from {opacity:0, transform:scale(.88)} → none
    duration compact?340:400；delay+540；easePlace

启动时：添加 entrance-active，移除 entrance-pending。
所有 animations 完成后：逐一执行 cancel()，再执行 revealImmediately()（清除 fallback timeout；移除两个类）。
如果 animate 抛出异常：取消全部动画并立即显示。
prefers-reduced-motion／无 animate：绝不进入 pending → 页面立即可见。

════════════════════════════════════════
响应式
════════════════════════════════════════
平板端 — @media (max-width: 56rem) and (max-aspect-ratio: 5/4)：
  .cards：width min(88cqw, 70cqh, 45rem)；height auto；scale 1
    2 列 grid；gap clamp(.75rem,2cqw,1.2rem)；rows auto
  .card：height auto；aspect-ratio .781；radius clamp(.9rem,2cqw,1.2rem)
  .card:last-child：grid-column 1/-1；width calc((100% - gap)/2)；居中；无 margin-top
  按源代码中的 clamps 缩小所有内部字号／图标（timeline、chip、axis、assistant、question、prompt、automate、magic、metric、tags）
  Panel radii 同样使用 clamp

移动端 — @media (max-width: 32rem)，或 (max-height: 28rem) and (max-width: 64rem) and (pointer: coarse)：
  html/body：height auto；min-height 100%；overflow auto
  .viewport：relative；min-height 100svh；overflow visible
  .scene：relative；height auto；min-height 100svh；使用 safe-area 设置 padding-block；
          container-type: inline-size；overflow visible
  .cards：relative；width min(90cqw, 26rem)；居中；1 列；gap clamp(1rem,4cqw,1.5rem)；
          不使用 translate/scale
  .card + :last-child：全宽；aspect-ratio .781；使用更大的 clamp radii
  移动端标题、正文、图表标签、CTA 使用更大的字号 clamp（automate min-height 2.75rem）

════════════════════════════════════════
构图规则
════════════════════════════════════════
- 首屏 = 一个完整构图：三张同级产品卡片置于纯色 #f0f0f0 背景上——无 nav、无 hero headline、无 footer、卡片外无 stats strip。
- Cards 是交互／内容容器；使用柔和桃色 borders 和暖色 shadows；无紫色主题，无 dark mode。
- 中间卡片（Falcon AI／Autonomous Workflows）是产品品牌信号，也是入场动画的领头元素。
- Decision chart 和 Automate sparkles 使用 canvas 绘制，而非图片。
- 单文件；支持桌面端、平板端和手机端。

构建结果应确保宽屏桌面截图呈现三张大小近似、居中并整体缩放的三联卡片：左侧是带 $4.7M chip 的 bar chart，中间是带 Automate pill 和黑色 cursor 的 Falcon AI workflow，右侧是带 128 Hrs／tags 的橙色汇聚 flow——随后在加载时播放从中间向两侧展开的入场动画。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度: 93 / 100
成本: 中

将此页面重建为单个自包含的 index.html 文件——像素级忠实还原 Falcon AI Operations Overview 三联画。不得使用框架、外部 CSS/JS/字体/图片。仅使用系统字体。浅色配色方案。桌面端所有尺寸均使用相对于尺寸容器的 CSS 容器查询单位（cqw/cqh）。 ════════════════════════════════════════ 页面元信息与启动 ════════════════════════════════════════ - <!doctype html>, lang="en" - viewport: width=device-width, initial-scale=1, viewport-fit=cover - color-scheme: light - title: Falcon AI Operations Overview - 在样式之前放置内联 head 脚本： - 如果 prefers-reduced-motion 不是 reduce，且 Element.prototype.animate 存在： - 在 <html> 上添加类 "entrance-pending" - 设置 window.__entranceFallback = setTimeout，在 3000ms 后移除 "entrance-pending" 和 "entrance-active" - 否则不执行任何操作（页面完全可见） ════════════════════════════════════════ 设计令牌（:root） ════════════════════════════════════════ --aspect: 1.5204255 （保留；布局计算不需要） --page: #f0f0f0 --surface: #fff --panel: #fffaf6 --ink: #282828 --muted: #777 --orange: #ff6900 --orange-soft: #ffdfca --green: #4d8c35 --weight-regular: 400 --weight-body: 475 --weight-medium: 500 --weight-semibold: 600 --weight-display: 600 --weight-card-title: 600 --weight-bold: 700 --card-title-size: 1.86cqw --card-title-tracking: -.125cqw --feature-title-size: 2.17cqw --feature-title-tracking: -.09cqw --cards-height: 33.81cqw --cards-scale: min(1, calc(60cqh / var(--cards-height))) ════════════════════════════════════════ 字体（精确堆栈——无 webfonts） ════════════════════════════════════════ 正文／大部分 UI： "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif weight: --weight-regular；antialiased；text-rendering: geometricPrecision 卡片标题（.card-copy）： "Segoe UI Semibold", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif 卡片正文段落： "Segoe UI Variable", "Segoe UI", Arial, sans-serif ════════════════════════════════════════ 全局布局 ════════════════════════════════════════ html, body：width/height 100%；margin 0；overflow hidden；background --page body color --ink .viewport：position fixed；inset 0；overflow hidden；bg --page .scene：absolute inset 0；overflow hidden；container-type: size；bg --page .cards（桌面端三联画）： position absolute；top/left 50%；translate -50% -50% width: 81.71cqw；height: var(--cards-height) display grid；grid-template-columns: 32.33% 32.33% 31.70% justify-content: space-between；align-items: start scale: var(--cards-scale) ← 当 viewport 较矮时缩小整个构图 ════════════════════════════════════════ 卡片外壳 ════════════════════════════════════════ .card： relative；width 100%；height 100%；overflow hidden display grid；grid-template-rows: 72.2% 27.8% ← panel／copy 分区 border: .075cqw solid rgb(255 233 218 / 96%) border-radius: 1.59cqw background: --surface box-shadow: .32cqw 1.18cqh 1.42cqw rgb(44 35 29 / 11%), 0 .18cqh .42cqw rgb(44 35 29 / 3.5%) .card:last-child（第 3 张／Faster Decisions）： height: 98.5%；margin-top: .76% .panel（上部视觉区域）： relative；margin-inline: 2.55%；overflow hidden border-radius: 1.28cqw 1.28cqw 1.08cqw 1.08cqw background: radial-gradient(circle at 50% 78%, rgb(255 225 207 / 30%), transparent 47%), linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 248 243 / 94%)) .card:last-child .panel： margin-inline: 2% background: radial-gradient(circle at 74% 46%, rgb(255 225 204 / 70%), transparent 48%), linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 242 232 / 97%)) .card-copy： relative；padding: 7.1% 8.4% 6.5% h2：margin 0 0 1.6%；color #292929；font-size --card-title-size；weight --weight-card-title； line-height 1.04；letter-spacing --card-title-tracking；white-space nowrap； transform: translateY(-.36cqh)；transform-origin left top .card:last-child h2：font-size --feature-title-size；letter-spacing --feature-title-tracking p：margin 0；color --muted；font-size 1.39cqw；weight --weight-medium； line-height 1.04；letter-spacing -.06cqw； transform: scaleX(.94)；transform-origin left top （使用 精确换行，文案见下文） .corner-icon： absolute；right 8.4%；bottom 22.5%；width 8.2%；aspect-ratio 1 display grid；place-items center；border-radius 50% background --orange-soft；color --orange 入场隐藏：.entrance-pending .card { opacity: 0 } 减少动态效果：.entrance-pending .card { opacity: 1 } .entrance-active 在 .card、.panel、.card-copy、h2、p、.corner-icon 上应用 will-change ════════════════════════════════════════ DOM 结构（精确顺序与文案） ════════════════════════════════════════ main.viewport[aria-label="Falcon AI operations overview"] section.scene section.cards[aria-label="Product benefits"] /* 卡片 1 — 即时可见性 */ article.card .panel[aria-label="Visibility timeline chart"] .timeline：span "06 AM" + i + span "12 PM" + i + span "06 PM" .bars[aria-hidden="true"]：24 个 ，--h 高度为： 20%,33%,48%,56%,51%,47%,39%,31%,53%,55%,60%,56%, 然后 .bar.active 100%，再依次为 92%,76%,67%,62%,65%,59%,70%,74%,87%,83%,77% .value-chip："$4.7M" .axis：START | ACTIVE | PEAK | COMPLETE .card-copy h2：即时可见性 p：实时掌握各项 运营数据。 span.corner-icon > i.spark /* 卡片 2 — 自主工作流（居中／产品锚点） */ article.card .panel .assistant-head：span.badge > i.spark + span "Falcon AI" p.question：我能如何帮你实现自动化？ .prompt（div）：在 WebFlow 中捕获新潜在客户时， 在 HubSpot 中创建交易，并在 Slack 上通知销售 团队。 .automate： span.automate-label：自动化 canvas.magic[data-sparkle-icon][aria-hidden] i.cursor[aria-hidden] .card-copy h2：自主工作流 p：使用 Falcon AI 自动化 业务流程。 span.corner-icon > i.flow-icon /* 卡片 3 — 更快决策 */ article.card .panel .metric： .metric-label：节省时间 .metric-row：strong "128 Hrs" + span "↑ 18% 效率" canvas.decision-flow[data-flow-chart][aria-label="Decision paths converging into an optimized result"] .tag.action：操作：批准 .tag.confidence：决策置信度：98% .tag.path：路径优化：+14.2% .card-copy h2：更快决策 p：将洞察即时转化为 行动。 span.corner-icon > i.speed ════════════════════════════════════════ 卡片 1 — 可见性图表细节 ════════════════════════════════════════ .timeline：absolute top 5.7% left 20.8% width 58.4%；flex；space-between；align center color #f27624；font-size .62cqw；weight medium；letter-spacing -.015cqw i：width 20%；border-top .05cqw dashed rgb(190 139 96 / 70%) .bars：absolute left/right 5.9%；bottom 12%；height 62%；flex；align flex-end；space-between .bar：width 2.4%；height var(--h)；border-radius 999px；bg rgb(255 219 196 / 64%) .bar.active：width 2.6%；bg --orange；box-shadow 0 0 .28cqw rgb(255 105 0 / 24%) .value-chip：absolute top 15.5% left 46.2% width 14% height 7.6% grid place-items center；border .12cqw solid #fff；radius 999px；bg --orange shadows：0 0 0 .055cqw --orange, 0 .28cqh .4cqw rgb(69 38 18 / 24%) color #fff；font .67cqw；weight semibold .axis：absolute left 7.7% right 7.2% bottom 5.2%；flex space-between color #888；font .57cqw .spark（corner + badge 基础样式）：relative width 52% aspect-ratio 1 ::before 横条：top 41% left 0 width 100% height 18%；radius 999px；bg currentColor ::after 竖条：top 0 left 41% width 18% height 100%；radius 999px；bg currentColor （= 加号／闪光字形） ════════════════════════════════════════ 卡片 2 — 工作流／助手细节 ════════════════════════════════════════ .assistant-head：absolute top 8.2% left 6.2%；flex；align center；gap 1.02cqw color --orange；font 1.28cqw；weight bold；letter-spacing -.04cqw .badge：2.16cqw 正方形圆形；bg --orange-soft；grid center badge 内的 .spark（覆盖）：width 48%；bg currentColor；filter blur(.035cqw)； clip-path polygon 8-point star： 47% 0, 53% 0, 58% 28%, 65% 35%, 72% 42%, 100% 47%, 100% 53%, 72% 58%, 65% 65%, 58% 72%, 53% 100%, 47% 100%, 42% 72%, 35% 65%, 28% 58%, 0 53%, 0 47%, 28% 42%, 35% 35%, 42% 28% ::before/::after content: none .question：absolute top 21.5% left 6.2%；margin 0；color #151515 font 1.34cqw；weight medium；line-height 1；letter-spacing -.07cqw .prompt：absolute top 32% left 6.2% width 87.2% height 35.8% padding 4.7% 4.2%；border .06cqw solid #beb4ae；radius .86cqw bg rgb(255 255 255 / 32%)；color --muted font 1.03cqw；weight --weight-body (475)；line-height 1.31；letter-spacing -.035cqw .automate（CTA 胶囊按钮）：absolute top 78.1% left 6.2% width 34.6% height 11.6% flex；align center；justify space-between；padding-inline 1cqw；radius 999px background: linear-gradient(100deg, #ff9b5b 0%, #ff8840 38%, #ff6b05 100%) box-shadow: 0 .6cqh 1.35cqw rgb(255 105 0 / 52%), 0 .2cqh .46cqw rgb(255 105 0 / 31%), 0 0 .82cqw .08cqw rgb(255 118 30 / 24%) color #fff；font .98cqw；weight body；line-height 1 .automate-label：letter-spacing -.025cqw；transform scaleX(1.03)；origin left center canvas.magic：flex 0 0 auto；width 1.5cqw；height 1.46cqw；translateX(-.15cqw) .cursor：absolute top 85.7% left 54% width 4.3% aspect-ratio .72；z-index 3；isolation isolate filter: drop-shadow(0 0 .075cqw #fff) ×2 + drop-shadow(.08cqw .16cqw .08cqw rgb(0 0 0 / 48%)) ::before：inset 0；bg #050505；clip-path polygon(0 0,94% 62%,57% 67%,38% 100%) ::after：inset -11%；z-index -1；bg #fff；使用相同 clip-path（白色轮廓） .flow-icon（corner）：width 54% height 58% bg linear-gradient(--orange,--orange) center / 48% 18% no-repeat（横条） ::before/::after：竖向圆角条，width 34% height 70% bg --orange before：left 4% top 24%；after：right 4% top 6% （= 风格化的“流程／分支”字形） ════════════════════════════════════════ 卡片 3 — 决策／指标细节 ════════════════════════════════════════ .metric：absolute top 7.8% left 5.2% .metric-label：mb .38cqh；color #676767；font .88cqw；weight body .metric-row：flex；align center；gap 1.02cqw strong：color --orange；font 2.1cqw；weight bold；lh .95；tracking -.04cqw span：mt .52cqh；color --green；font .93cqw；weight bold；tracking -.045cqw .decision-flow canvas：absolute top 39% left 0 width 100% height 53%；display block；pointer-events none .tag：absolute z-index 2；height 8.3%；grid center；radius 999px bg rgb(255 255 255 / 95%)；color #282828；font .62cqw；weight semibold；tracking -.012cqw .tag.action： top 34.8%；right 8%；width 28% .tag.confidence：top 67%；left 6%；width 40% .tag.path： top 82.2%；right 8%；width 37% .speed（corner 闪电）：width 58% aspect-ratio 1 通过 multi-background 绘制三条橙色横条： linear-gradient(--orange,--orange) 0 31% / 27% 8% no-repeat, linear-gradient(--orange,--orange) 0 49% / 38% 8% no-repeat, linear-gradient(--orange,--orange) 0 67% / 22% 8% no-repeat ::before：inset 4% 1% 2% 28%；bg --orange； clip-path polygon(58% 0,100% 0,69% 40%,94% 40%,28% 100%,44% 58%,7% 58%) ::after：content none ════════════════════════════════════════ CANVAS 1 — 闪光图标（Automate 按钮） ════════════════════════════════════════ ResizeObserver 重绘 [data-sparkle-icon]。支持 DPR 的 canvas 尺寸设置。数据（冻结）： sparkles: [{x:.01,y:.01,size:.50}, {x:.28,y:.26,size:.72}] sparklePoints（单位星形）： [.50,.06],[.59,.41],[.94,.50],[.59,.59],[.50,.94],[.41,.59],[.06,.50],[.41,.41] 绘制每个 sparkle： size = min(w,h) * sparkle.size；按照 canvas 边界的 x/y 偏移将 sparklePoints → 绝对坐标点 roundedPolygon(points, roundness .34)：对每个角，从第一个角的 after-point 开始 move to，随后对每个后续点执行：lineTo(before) + quadraticCurveTo(point, after)，闭合路径 fillStyle rgba(255,220,202,.55)；strokeStyle #fff lineWidth max(1.1, size*.15)；lineCap/Join round shadowColor rgba(255,255,255,.78)；shadowBlur size*.06；填充并描边；清除阴影 ════════════════════════════════════════ CANVAS 2 — 决策流程图 ════════════════════════════════════════ ResizeObserver 重绘 [data-flow-chart]。支持 DPR。 Bands（从左至右填充的 bezier ribbons），source/target 为高度比例的 [top,bottom]： {source:[.08,.26], target:[.29,.32], color:'rgba(255,189,144,.60)'} {source:[.23,.42], target:[.30,.335], color:'rgba(255,149,80,.70)'} {source:[.50,.75], target:[.32,.355], color:'rgba(255,136,64,.82)'} {source:[.69,.98], target:[.33,.365], color:'rgba(255,181,128,.54)'} {source:[.39,.51], target:[.31,.345], color:'rgba(255,105,0,.96)'} ← 最亮核心 flowShape：sourceHold .38，targetApproach .74，threadWidth .00135 Band 路径：move(0, h*sourceTop) → cubic(w*sourceHold,h*sourceTop, w*targetApproach,h*targetTop, w,h*targetTop) → line(w,h*targetBottom) → cubic 返回 (0,h*sourceBottom) → close → fill Threads（叠加于顶部的白色描边）： {source:.05, target:.30, alpha:.68} {source:.20, target:.315, alpha:.60} {source:.62, target:.342, alpha:.84} {source:.82, target:.352, alpha:.74} {source:.97, target:.36, alpha:.64} lineWidth max(.72, w*threadWidth)；strokeStyle rgba(255,255,255,alpha) 使用与 band 边缘相同的 bezier 控制点（sourceHold / targetApproach）视觉效果：五条橙色 ribbons 从左侧扇形汇聚成右侧的紧密节点；白色细线沿 ribbons 延伸。 ════════════════════════════════════════ 入场动画（Web Animations API——精确编排） ════════════════════════════════════════ 仅当 html 带有 entrance-pending 且 !window.__entranceStarted 时执行。设置 __entranceStarted = true。两次 rAF 后： 1) 测量与 viewport 相交的可见 cards。 2) 检测 singleRow：所有可见 cards 的顶部与最上方顶部之间的差值不超过 max(4, height*0.04)。 3) 顺序： - singleRow（桌面端）：先显示 centre card index===1，再按距 viewport 中心的绝对距离排列其他卡片 - 否则（平板／手机）：先按 top、再按 left 排序 4) compact = viewport.width <= 512 rise = compact ? 11 : 16 easings：easePlace = cubic-bezier(.16,1,.3,1)；easeWipe = cubic-bezier(.24,.86,.28,1) 每张 card 的 delays： singleRow：primary（index 1）delay 60；其他为 245 + (order-1)*85 stacked：70 + order*115 drift（仅 singleRow 的非 primary）：-sign(centreOffset) * min(width*0.018, 7) 否则 drift 0 每张 card 分四层（fill: both）： SURFACE .card： from {opacity:0, transform: translate3d(drift, rise, 0) scale(.985)} → {opacity:1, transform:none} duration compact?780 : (primary?960:900)；delay；easePlace 注意：card 上不使用 clip-path（否则会裁切 shadow） PANEL .panel： from {opacity:0, transform:scale(.994), clipPath: inset(0 0 {compact?26:34}% 0)} → {opacity:1, transform:none, clipPath:inset(0 0 0 0)} duration compact?620:720；delay+200；easeWipe COPY .card-copy： from {opacity:0, transform: translate3d(0, compact?8:11, 0)} → none duration compact?540:620；delay+330；easePlace HEADING / DESCRIPTION（仅 clip 揭示——不要 transform 它们；保留已编写的 transforms）： from {opacity:0, clipPath: inset(-30% 0 100% 0)} → {opacity:1, clipPath: inset(-30% 0 -30% 0)} heading：delay+350；duration compact?470:540；easeWipe description：delay+450；duration compact?430:490；easeWipe ACCENT .corner-icon： from {opacity:0, transform:scale(.88)} → none duration compact?340:400；delay+540；easePlace 启动时：添加 entrance-active，移除 entrance-pending。所有 animations 完成后：逐一执行 cancel()，再执行 revealImmediately()（清除 fallback timeout；移除两个类）。如果 animate 抛出异常：取消全部动画并立即显示。 prefers-reduced-motion／无 animate：绝不进入 pending → 页面立即可见。 ════════════════════════════════════════ 响应式 ════════════════════════════════════════ 平板端 — @media (max-width: 56rem) and (max-aspect-ratio: 5/4)： .cards：width min(88cqw, 70cqh, 45rem)；height auto；scale 1 2 列 grid；gap clamp(.75rem,2cqw,1.2rem)；rows auto .card：height auto；aspect-ratio .781；radius clamp(.9rem,2cqw,1.2rem) .card:last-child：grid-column 1/-1；width calc((100% - gap)/2)；居中；无 margin-top 按源代码中的 clamps 缩小所有内部字号／图标（timeline、chip、axis、assistant、question、prompt、automate、magic、metric、tags） Panel radii 同样使用 clamp 移动端 — @media (max-width: 32rem)，或 (max-height: 28rem) and (max-width: 64rem) and (pointer: coarse)： html/body：height auto；min-height 100%；overflow auto .viewport：relative；min-height 100svh；overflow visible .scene：relative；height auto；min-height 100svh；使用 safe-area 设置 padding-block； container-type: inline-size；overflow visible .cards：relative；width min(90cqw, 26rem)；居中；1 列；gap clamp(1rem,4cqw,1.5rem)；不使用 translate/scale .card + :last-child：全宽；aspect-ratio .781；使用更大的 clamp radii 移动端标题、正文、图表标签、CTA 使用更大的字号 clamp（automate min-height 2.75rem） ════════════════════════════════════════ 构图规则 ════════════════════════════════════════ - 首屏 = 一个完整构图：三张同级产品卡片置于纯色 #f0f0f0 背景上——无 nav、无 hero headline、无 footer、卡片外无 stats strip。 - Cards 是交互／内容容器；使用柔和桃色 borders 和暖色 shadows；无紫色主题，无 dark mode。 - 中间卡片（Falcon AI／Autonomous Workflows）是产品品牌信号，也是入场动画的领头元素。 - Decision chart 和 Automate sparkles 使用 canvas 绘制，而非图片。 - 单文件；支持桌面端、平板端和手机端。构建结果应确保宽屏桌面截图呈现三张大小近似、居中并整体缩放的三联卡片：左侧是带 $4.7M chip 的 bar chart，中间是带 Automate pill 和黑色 cursor 的 Falcon AI workflow，右侧是带 128 Hrs／tags 的橙色汇聚 flow——随后在加载时播放从中间向两侧展开的入场动画。

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

高密度 3D 浏览器森林生成器

自主运营

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

高密度 3D 浏览器森林生成器