AnimateLighting

무언가의 바깥을 도는 빛입니다. 광채가 내용 위가 아니라 뒤에 있으므로, 감싼 것이 그려지는 방식을 하나도 바꾸지 않으면서 그것을 표시합니다.

import { AnimateLighting } from 'neba';

<AnimateLighting size="md">
  <Card title="4,281개 행 분석 중">보통 1분쯤 걸립니다.</Card>
</AnimateLighting>;

Props

Prop	타입	기본값	설명
glow	string	—	의미론적 색이 아닌 임의의 CSS 색상. color보다 우선합니다
spread	number	3	내용 바깥으로 빛이 번지는 거리(px)
arc	number	50	한 번에 밝아지는 호의 길이(도). 작으면 스치는 불꽃, 크면 훑는 빛입니다
blur	number	4	빛의 부드러움(px). 0이면 빛이 아니라 도형처럼 보입니다
reverse	boolean	false	빛이 반대 방향으로 돕니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	빛이 따라가는 반경. 안에 든 것의 반경과 맞아야 합니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	빛의 색 역할
duration공통	number	3000	한 번 재생되는 시간(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={<section />}). Base UI의 render prop 그대로
children	ReactNode	—	빛이 둘러싸는 것

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

size는 안에 든 것의 반경과 맞아야 합니다. 광채는 래퍼 자신의 모서리를 따라가므로, xs Lighting 안에 lg 카드를 넣으면 카드가 이미 깎아 낸 네 모서리에서 빛이 삐져나옵니다.

예시

color와 glow

color는 여섯 의미론적 색 중 하나입니다. glow는 대신 CSS 색상을 받아, 상태가 아니라 장식으로서의 빛을 만듭니다.

import { AnimateLighting, Box, Typography } from 'neba';

const FAMILIES = ['primary', 'success', 'warning', 'danger'] as const;

export default function AnimateLightingColors() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      {FAMILIES.map((color) => (
        <AnimateLighting key={color} color={color} size="md">
          <Box size="md">
            <Typography level="caption">{color}</Typography>
          </Box>
        </AnimateLighting>
      ))}
    </div>
  );
}

arc, spread, blur

arc는 한 번에 밝아지는 윤곽의 길이를 도로 정합니다. 작으면 스치고 지나가는 불꽃, 크면 훑고 지나가는 빛입니다. spread는 내용 바깥으로 빛이 얼마나 번지는지, blur는 얼마나 부드러운지입니다. 0이면 빛이 아니라 도형처럼 읽힙니다.

import { AnimateLighting, Box, Typography } from 'neba';

const SHAPES = [
  { label: 'spark', arc: 20, spread: 3, blur: 3, duration: 1800 },
  { label: 'sweep', arc: 120, spread: 4, blur: 8, duration: 3200 },
  { label: 'halo', arc: 170, spread: 8, blur: 14, duration: 5000 }
];

export default function AnimateLightingShape() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5">
      {SHAPES.map((shape) => (
        <AnimateLighting
          key={shape.label}
          arc={shape.arc}
          spread={shape.spread}
          blur={shape.blur}
          duration={shape.duration}
          size="md"
        >
          <Box size="md">
            <Typography level="caption">{shape.label}</Typography>
          </Box>
        </AnimateLighting>
      ))}
    </div>
  );
}

trigger="hover"

무한히 반복하는 효과에 hover를 걸면 포인터가 올라가 있는 동안 재생되고 떠나면 멈춥니다. 키보드 focus도 포인터로 세므로 마우스 없이도 닿습니다.

import { AnimateLighting, Button } from 'neba';

/* An infinite effect on `hover` stops when the pointer leaves; keyboard focus
   counts as a pointer, so it is reachable without a mouse. */
export default function AnimateLightingHover() {
  return (
    <AnimateLighting trigger="hover" size="md" glow="#d946ef" arc={70} duration={1600}>
      <Button size="lg">Upgrade the plan</Button>
    </AnimateLighting>
  );
}

접근성

• 축소된 모션 설정에서는 호가 돌기를 멈추고 고른 광채가 됩니다. 장식은 살아남고 움직임은 사라집니다.
• 그래서 빛만으로 진행 상태를 전달해서는 안 됩니다. "분석 중", "실시간" 같은 문구와 함께 쓰고, 문구를 대신하는 용도로는 쓰지 마세요.
• 래퍼는 role도 이름도 더하지 않습니다.