← BACK TO CATALOG
EFFECT №002

REVEAL
MASK

テキストが下から立ち上がるように現れる。マスクで切り取られた領域から、文字が建築の柱のように顕在化する。

TEXT CSS

CUSTOMIZE

↻ LIVE PREVIEW

入力すると下のデモ・コード・AIプロンプトが全て即座に書き換わります。

FORM
FOLLOWS
FUNCTION
HOVER EACH LINE

CODE

01 / 02
<div class="reveal-wrap">
  <div class="reveal-line">FORM FOLLOWS FUNCTION</div>
</div>
.reveal-wrap {
  overflow: hidden;
  padding: 0.5rem 0;
  cursor: pointer;
}

.reveal-line {
  font-family: 'Oswald', sans-serif;
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1A1A1A;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.reveal-wrap:hover .reveal-line {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line { transform: translateY(0); transition: none; }
}

AI PROMPT

02 / 02
Implement a "Reveal Mask" text effect.

Behavior:
- Text starts hidden below a clipping mask (translateY: 110%).
- On hover (or scroll into view), text slides up to translateY: 0.
- Easing: cubic-bezier(0.65, 0, 0.35, 1), duration 0.7s.
- Use overflow:hidden on a wrapper, transform on the inner text.
- For multi-line: stagger transition-delay per line (0.1s, 0.2s...).

Constraints:
- Pure CSS only (no JS unless triggering on scroll).
- Respect prefers-reduced-motion (disable transform, show text immediately).

Output: HTML + CSS in 2 separate code blocks.
Create a CSS-only "Reveal Mask" text reveal:

Structure:
- Wrapper div with overflow: hidden
- Inner element with the text content

Animation:
- Initial: transform: translateY(110%)  — text hidden below mask
- On wrapper:hover (or .visible class added by IntersectionObserver):
  transform: translateY(0)
- Transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1)

Multi-line support:
- Each line has its own wrapper.
- Stagger via transition-delay: 0.1s × index.

A11y:
- @media (prefers-reduced-motion: reduce): instant show, no transition.

Generate complete HTML + CSS.
Build a React component <RevealMask> with these props:
- children: ReactNode
- delay?: number (default 0, in seconds)
- triggerOnView?: boolean (default true)

Behavior:
- Wrapper has overflow: hidden.
- Inner span starts with translateY(110%).
- When triggerOnView=true: use IntersectionObserver to add .revealed class.
- When triggerOnView=false: only animate on hover.

Tailwind:
- Wrapper: overflow-hidden inline-block
- Inner: inline-block translate-y-full transition-transform duration-700 ease-[cubic-bezier(0.65,0,0.35,1)]
- Revealed state: translate-y-0
- Apply transition-delay via inline style from `delay` prop.

Honor prefers-reduced-motion via window.matchMedia.