AnimateBlink

완전한 불투명도와 정해진 바닥값 사이를 오가며 맥동하는 효과입니다. 주기가 대칭이므로 몇 번을 반복하든 시작한 자리에서 끝납니다.

import { AnimateBlink } from 'neba';

<AnimateBlink min={0.35}>
  <Chip color="danger" variant="solid">
    녹화 중
  </Chip>
</AnimateBlink>;

Props

Prop	타입	기본값	설명
min	number	0	가장 흐릴 때의 불투명도, 0에서 1 사이
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
duration공통	number	900	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	'infinite'	반복 횟수
alternate공통	boolean	false	한 번 걸러 거꾸로 재생합니다. 반복이 처음으로 튀지 않고 되돌아옵니다
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 재생을 시작하는지. visible은 화면에 들어올 때, hover는 포인터가 올라올 때(포커스 포함), manual은 play가 정합니다
play	boolean	—	trigger가 manual일 때 재생합니다. false → true 될 때마다 처음부터 다시 시작합니다
once공통	boolean	true	trigger가 visible일 때 처음 한 번만 재생할지. 끄면 화면에 들어올 때마다 다시 재생됩니다
threshold공통	number	0.2	trigger가 visible일 때 화면에 얼마나 들어와야 하는지, 0에서 1 사이
paused공통	boolean	false	있는 자리에 붙들어 둡니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<span />}). Base UI의 render prop 그대로
children	ReactNode	—	깜박이는 것

나머지 <div> 속성은 모두 루트로 전달됩니다. 모든 Animate*가 공유하는 설정은 Prop 규약에 있습니다.

mode는 없습니다. 주기가 양쪽 방향으로 같으므로 거꾸로 재생한다는 말에 담길 뜻이 없습니다.

예시

min

주기의 바닥에서 얼마나 흐려지는지를 0에서 1 사이로 정합니다. 0이면 내용이 사라집니다. 맥동하는 동안에도 읽혀야 하는 것(대부분이 그렇습니다)은 이 값을 올리세요.

import { AnimateBlink, Chip } from 'neba';

/* `min` is a dimming rather than a disappearance, which is what keeps the word
   readable while it pulses. */
export default function AnimateBlinkFloor() {
  return (
    <div className="flex items-center gap-3">
      {[0, 0.3, 0.6].map((min) => (
        <AnimateBlink key={min} min={min} duration={1200}>
          <Chip color="warning">min {min}</Chip>
        </AnimateBlink>
      ))}
    </div>
  );
}

repeat

따로 말하지 않으면 끝없이 반복합니다. 한 번뿐인 깜박임은 효과가 아니라 화면 결함이기 때문입니다. 횟수를 정하는 것은 한 번 시선을 끌기 위한 용도입니다. 세 번 맥동하고 멈춥니다.

import { useState } from 'react';
import { AnimateBlink, Button, Typography } from 'neba';

export default function AnimateBlinkCounted() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex flex-col items-center gap-4">
      <Button size="sm" variant="outline" onClick={() => setRun((count) => count + 1)}>
        Draw attention
      </Button>

      <AnimateBlink key={run} repeat={3} duration={500} min={0.2}>
        <Typography level="h4" color="danger">
          Payment overdue
        </Typography>
      </AnimateBlink>
    </div>
  );
}

paused

paused는 애니메이션을 있는 자리에 붙들어 둡니다. 실시간 표시를 unmount하지 않고 멈추는 방법입니다.

<AnimateBlink paused={!recording} min={0.35}>
  <Chip color="danger">녹화 중</Chip>
</AnimateBlink>

stagger

stagger, durationStep, reverse는 상자 대신 자식 하나하나에게 효과를 차례로 넘깁니다. 동작은 AnimateFade와 같고, 그쪽 페이지에 자세히 적혀 있습니다.

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 내용은 완전한 불투명도로 놓입니다.
• 그래서 깜박임이 메시지를 혼자 지고 있어서는 안 됩니다. 말로도 하세요. "녹화 중"이라고 적힌 Chip은 맥동하든 하지 않든 그렇게 말합니다.
• 읽고 있는 페이지의 한구석에서 멈추지 않고 움직이는 것은 이 라이브러리가 다른 곳에서는 거부하는 종류의 모션입니다. 정말로 살아 있는 상태에만 쓰고, 그 상태가 끝나면 멈추세요.