Spotlight (스포트라이트)
다른 이름 Spotlight sweep, Light cone
부드러운 원뿔형 빛이나 빛 웅덩이가 스치듯 들어와 배경 일부를 비춥니다.
쓰는 곳
히어로 제목
변형
- sweep in
- pulsing
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스포트라이트(Spotlight) 효과를 넣어 줘. 스포트라이트 스윕(spotlight sweep), 라이트 콘(light cone)이라고도 불러.
페이지가 로드되면 부드러운 원뿔형 빛이 모서리에서 비스듬히 들어와 제목 위에 자리 잡고, 도착하면서 밝아지게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛이 이미 자리 잡은 상태로 보여 줘.비슷한 모션
Lamp Effect (램프 효과)
다른 이름 Lamp glow
빛나는 램프 선이 넓어지며 아래 제목 위로 원뿔형 빛을 드리웁니다.
쓰는 곳
어두운 히어로 제목
[적용할 곳]에 램프 효과(Lamp Effect)를 넣어 줘. 램프 글로우(lamp glow)라고도 불러.
섹션이 화면에 들어오면 가늘게 빛나는 선이 가운데서 양옆으로 넓어지며 아래 제목에 부드러운 원뿔형 빛을 드리우고, 제목은 떠오르며 서서히 나타나게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 받은 제목을 바로 보여 줘.Light Rays (라이트 레이)
다른 이름 God rays, Light shafts
부드러운 빛줄기가 배경 위에서 흔들립니다.
쓰는 곳
분위기 있는 헤더
[적용할 곳]에 라이트 레이(Light Rays) 배경을 넣어 줘. 갓 레이(god rays), 라이트 샤프트(light shafts)라고도 불러.
부드럽고 반투명한 빛줄기 여러 개가 위에서 부채꼴로 퍼지고, 조금씩 밝아졌다 어두워지며 좌우로 은은하게 흔들리게 해 줘. 느리고 분위기 있게.
빛줄기는 콘텐츠 뒤에 두고 가독성을 해치지 않을 만큼 흐리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
포인터를 움직여 보세요
Cursor Spotlight (커서 스포트라이트)
다른 이름 Flashlight cursor, Spotlight effect
포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.
쓰는 곳
히어로 섹션, 드러내기 효과
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.A
포인터를 움직여 보세요
Card Spotlight (카드 스포트라이트)
다른 이름 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
부드러운 원형 빛이 포인터를 따라 카드 표면을 움직이며 아래 배경을 드러냅니다.
쓰는 곳
기능 소개 카드, 벤토 그리드
[적용할 곳]에 카드 스포트라이트(Card Spotlight) 효과를 넣어 줘. 스포트라이트 호버(spotlight hover), 포인터 글로우(pointer glow), 마우스 추적 글로우(mouse-following glow), 방사형 그라디언트 호버(radial gradient hover)라고도 불러.
부드럽고 희미한 원형 빛이 포인터를 따라 카드 표면을 움직이고, 포인터가 들어오면 서서히 나타났다가 벗어나면 사라지게 해 줘.
글자가 잘 읽히도록 빛은 카드 내용 뒤에 두고, 터치 기기에서는 카드를 그냥 비추지 않은 채로 둬 줘.Background & Ambient의 다른 모션
Starfield (스타필드)
다른 이름 Stars background, Twinkling stars
우주 같은 어두운 배경 위에서 작은 별들이 반짝이거나 떠다닙니다.
쓰는 곳
우주·밤 테마 히어로
[적용할 곳]에 스타필드(Starfield) 배경을 넣어 줘. 별 배경(stars background), 반짝이는 별(twinkling stars)이라고도 불러.
크기가 제각각인 작은 별들이 저마다의 속도로 은은하게 반짝이고, 별밭 전체는 아주 천천히 흘러가게 해 줘. 고요하고 차분하게.
가볍도록 별 개수는 적당히 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반짝임과 흐름을 멈춰 줘.Vortex (보텍스)
다른 이름 Swirling particles
입자들이 소용돌이처럼 중심 주위를 나선형으로 돕니다.
쓰는 곳
극적인 히어로 배경
[적용할 곳]에 보텍스(Vortex) 배경을 넣어 줘. 소용돌이 파티클(swirling particles)이라고도 불러.
작은 입자들이 소용돌이처럼 중심점 주위를 나선형으로 안쪽으로 돌고, 가장자리에서 서서히 나타나 가운데에 다다르면 사라지는 부드럽고 끊김 없는 회오리로 만들어 줘.
입자 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회오리를 멈춰 줘.Wave Background (웨이브 배경)
다른 이름 Wavy background, Animated waves
겹겹이 쌓인 물결선이나 물결 모양이 가로로 일렁입니다.
쓰는 곳
섹션 구분선, 히어로 하단
[적용할 곳]에 웨이브 배경(Wave Background)을 넣어 줘. 웨이비 배경(wavy background), 애니메이티드 웨이브(animated waves)라고도 불러.
겹쳐진 물결 몇 개가 조금씩 다른 속도로 옆으로 흘러가면서 물처럼 겹치고 움직이게 해 줘. 느리고 부드럽게.
물결마다 튀는 곳 없이 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.