pattern @community/pattern-slide-up-reveal

Slide Up Reveal

内容从下方 16-24px 处上滑同时 opacity 渐入，比纯 fade 更强烈的'到达'感。Hero section、card grid、modal 内容进场最常用。Apple / Stripe / Notion 风格。

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 0.0
Edges: 0 out · 0 in
Tokens: 43/544/1144

$ aoe install @community/pattern-slide-up-reveal

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

SlideUpReveal [pattern] v1.0.0

内容从下方 16-24px 处上滑同时 opacity 渐入，比纯 fade 更强烈的'到达'感。Hero section、card grid、modal 内容进场最常用。Apple / Stripe / Notion 风格。

Loaded when retrieval picks the atom as adjacent / supporting.

SlideUpReveal [pattern] v1.0.0

内容从下方 16-24px 处上滑同时 opacity 渐入，比纯 fade 更强烈的'到达'感。Hero section、card grid、modal 内容进场最常用。Apple / Stripe / Notion 风格。

Label

Slide Up Reveal

Problem

纯 fade 太柔，对 hero / card 这种主体内容不够'有分量'。直接 hard-paint 又太突兀。需要一个比 fade 强、比弹跳轻的中间方案。

Solution

translateY(20px) → translateY(0) 同步 opacity 0 → 1，时长 400-600ms，easing 用强减速曲线 cubic-bezier(0.16, 1, 0.3, 1)。距离比 fade-in-on-load 大 2-3 倍，用强 easing 抵消时长增加的钝感。

Structure

    <section class="hero">
      <h1 class="slide-up">Build something great</h1>
      <p  class="slide-up" style="animation-delay: 100ms">A subtitle that lands second</p>
      <div class="slide-up" style="animation-delay: 200ms">
        <button>Get started</button>
      </div>
    </section>

Styles

    @keyframes slide-up-reveal {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .slide-up {
      opacity: 0;
      animation: slide-up-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .slide-up {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

Timing

Duration: 400-600ms (sweet spot 480ms)
Easing: cubic-bezier(0.16, 1, 0.3, 1) — ease-out-quint, Linear-style
Distance: translateY(16-24px)

Interaction

首次进入视口或挂载时触发一次
Modal / drawer 内容用此 pattern：dialog 打开时内容 slide-up，比纯 fade 更有'抵达'感
Card grid：配合 stagger（见 pattern-stagger-reveal）做错位上滑
进行中点击可交互元素不受影响——动画走在 transform 层不阻塞 hit-test

A11y

prefers-reduced-motion: reduce 必须强制 transform: none + opacity: 1
translateY 距离不要超过元素高度的 50%——超过会有'飞入'的感觉，对前庭敏感用户不友好
动画不要循环：进场是一次性事件，infinite 会造成持续晕动
首屏 LCP 元素禁用此动画（LCP 计算包含动画结束时间）

Behavior

translateY 起始 16-24px：再小退化成 fade-in，再大变 throw-in
强 easing（quint）让运动'迅速到达然后悬停感'——和 ease-out 比有更强的 anticipation
duration 必须 ≥ 400ms：距离大需要时间，否则视觉残影
顺序入场时 stagger 间隔 80-120ms（比 fade-in 长，因为单元素动画更长）
纯 transform + opacity 走 GPU 合成层，性能成本几乎为零

Loaded when retrieval picks the atom as a focal / direct hit.

SlideUpReveal [pattern] v1.0.0

内容从下方 16-24px 处上滑同时 opacity 渐入，比纯 fade 更强烈的'到达'感。Hero section、card grid、modal 内容进场最常用。Apple / Stripe / Notion 风格。

Label

Slide Up Reveal

Problem

纯 fade 太柔，对 hero / card 这种主体内容不够'有分量'。直接 hard-paint 又太突兀。需要一个比 fade 强、比弹跳轻的中间方案。

Solution

Structure

    <section class="hero">
      <h1 class="slide-up">Build something great</h1>
      <p  class="slide-up" style="animation-delay: 100ms">A subtitle that lands second</p>
      <div class="slide-up" style="animation-delay: 200ms">
        <button>Get started</button>
      </div>
    </section>

Styles

    @keyframes slide-up-reveal {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .slide-up {
      opacity: 0;
      animation: slide-up-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .slide-up {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

Timing

Duration: 400-600ms (sweet spot 480ms)
Easing: cubic-bezier(0.16, 1, 0.3, 1) — ease-out-quint, Linear-style
Distance: translateY(16-24px)

Interaction

首次进入视口或挂载时触发一次
Modal / drawer 内容用此 pattern：dialog 打开时内容 slide-up，比纯 fade 更有'抵达'感
Card grid：配合 stagger（见 pattern-stagger-reveal）做错位上滑
进行中点击可交互元素不受影响——动画走在 transform 层不阻塞 hit-test

A11y

prefers-reduced-motion: reduce 必须强制 transform: none + opacity: 1
translateY 距离不要超过元素高度的 50%——超过会有'飞入'的感觉，对前庭敏感用户不友好
动画不要循环：进场是一次性事件，infinite 会造成持续晕动
首屏 LCP 元素禁用此动画（LCP 计算包含动画结束时间）

Behavior

translateY 起始 16-24px：再小退化成 fade-in，再大变 throw-in
强 easing（quint）让运动'迅速到达然后悬停感'——和 ease-out 比有更强的 anticipation
duration 必须 ≥ 400ms：距离大需要时间，否则视觉残影
顺序入场时 stagger 间隔 80-120ms（比 fade-in 长，因为单元素动画更长）
纯 transform + opacity 走 GPU 合成层，性能成本几乎为零

Relations

related: [@community/pattern-fade-in-on-load, @community/pattern-stagger-reveal, @community/pattern-scroll-reveal, @community/pattern-page-transition, @community/fact-easing-cubic-bezier, @community/fact-duration-perception-thresholds, @community/fact-stagger-feel-organic, @community/constraint-reduced-motion, @community/check-reduced-motion-required, @community/check-focus-visible]

Label

Slide Up Reveal

Problem

纯 fade 太柔，对 hero / card 这种主体内容不够'有分量'。直接 hard-paint 又太突兀。需要一个比 fade 强、比弹跳轻的中间方案。

Solution

Structure

    <section class="hero">
      <h1 class="slide-up">Build something great</h1>
      <p  class="slide-up" style="animation-delay: 100ms">A subtitle that lands second</p>
      <div class="slide-up" style="animation-delay: 200ms">
        <button>Get started</button>
      </div>
    </section>

Styles

    @keyframes slide-up-reveal {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .slide-up {
      opacity: 0;
      animation: slide-up-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .slide-up {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

Timing

Duration: 400-600ms (sweet spot 480ms)
Easing: cubic-bezier(0.16, 1, 0.3, 1) — ease-out-quint, Linear-style
Distance: translateY(16-24px)

Interaction

首次进入视口或挂载时触发一次
Modal / drawer 内容用此 pattern：dialog 打开时内容 slide-up，比纯 fade 更有'抵达'感
Card grid：配合 stagger（见 pattern-stagger-reveal）做错位上滑
进行中点击可交互元素不受影响——动画走在 transform 层不阻塞 hit-test

A11y

prefers-reduced-motion: reduce 必须强制 transform: none + opacity: 1
translateY 距离不要超过元素高度的 50%——超过会有'飞入'的感觉，对前庭敏感用户不友好
动画不要循环：进场是一次性事件，infinite 会造成持续晕动
首屏 LCP 元素禁用此动画（LCP 计算包含动画结束时间）

Behavior

translateY 起始 16-24px：再小退化成 fade-in，再大变 throw-in
强 easing（quint）让运动'迅速到达然后悬停感'——和 ease-out 比有更强的 anticipation
duration 必须 ≥ 400ms：距离大需要时间，否则视觉残影
顺序入场时 stagger 间隔 80-120ms（比 fade-in 长，因为单元素动画更长）
纯 transform + opacity 走 GPU 合成层，性能成本几乎为零

Source

where the compiled artifact came from

aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-slide-up-reveal/atom.yaml

Slide Up Reveal

Projection

SlideUpReveal [pattern] v1.0.0

SlideUpReveal [pattern] v1.0.0

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

SlideUpReveal [pattern] v1.0.0

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

Relations

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

Source