Light Rays (라이트 레이)
다른 이름 God rays, Light shafts
부드러운 빛줄기가 배경 위에서 흔들립니다.
쓰는 곳
분위기 있는 헤더
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 라이트 레이(Light Rays) 배경을 넣어 줘. 갓 레이(god rays), 라이트 샤프트(light shafts)라고도 불러.
부드럽고 반투명한 빛줄기 여러 개가 위에서 부채꼴로 퍼지고, 조금씩 밝아졌다 어두워지며 좌우로 은은하게 흔들리게 해 줘. 느리고 분위기 있게.
빛줄기는 콘텐츠 뒤에 두고 가독성을 해치지 않을 만큼 흐리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.비슷한 모션
Spotlight (스포트라이트)
다른 이름 Spotlight sweep, Light cone
부드러운 원뿔형 빛이나 빛 웅덩이가 스치듯 들어와 배경 일부를 비춥니다.
쓰는 곳
히어로 제목
[적용할 곳]에 스포트라이트(Spotlight) 효과를 넣어 줘. 스포트라이트 스윕(spotlight sweep), 라이트 콘(light cone)이라고도 불러.
페이지가 로드되면 부드러운 원뿔형 빛이 모서리에서 비스듬히 들어와 제목 위에 자리 잡고, 도착하면서 밝아지게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛이 이미 자리 잡은 상태로 보여 줘.Aurora Background (오로라 배경)
다른 이름 Northern lights gradient
흐릿하고 부드러운 색 띠가 오로라처럼 콘텐츠 뒤에서 일렁입니다.
쓰는 곳
히어로 섹션
[적용할 곳]에 오로라 배경(Aurora Background)을 넣어 줘. 노던 라이츠 그라디언트(northern lights gradient)라고도 불러.
흐릿하고 부드러운 색 띠들이 콘텐츠 뒤에서 천천히 떠다니고 흔들리며, 서로 겹치고 섞여 북극광처럼 보이게 해 줘. 아주 느리고 몽환적으로.
위에 있는 글자는 잘 읽히게 하고, 부드럽게 돌아가도록 매 프레임마다 띠에 블러를 다시 걸지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Lamp Effect (램프 효과)
다른 이름 Lamp glow
빛나는 램프 선이 넓어지며 아래 제목 위로 원뿔형 빛을 드리웁니다.
쓰는 곳
어두운 히어로 제목
[적용할 곳]에 램프 효과(Lamp Effect)를 넣어 줘. 램프 글로우(lamp glow)라고도 불러.
섹션이 화면에 들어오면 가늘게 빛나는 선이 가운데서 양옆으로 넓어지며 아래 제목에 부드러운 원뿔형 빛을 드리우고, 제목은 떠오르며 서서히 나타나게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 받은 제목을 바로 보여 줘.Background Beams (배경 빔)
다른 이름 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
가늘게 빛나는 선이 경로를 따라 이동하고, 때로는 표면에 부딪혀 터집니다.
쓰는 곳
히어로 배경
[적용할 곳]에 배경 빔(Background Beams) 효과를 넣어 줘. 라이트 빔(light beams), 배경 라인(background lines)이라고도 불러.
흐린 곡선 경로들을 배경에 깔고, 그 위로 짧게 빛나는 줄기가 하나씩 차분하고 일정한 속도로 지나가게 해 줘.
빔들은 시차를 둬서 절대 한꺼번에 움직이지 않게 하고, 콘텐츠 뒤에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Background & Ambient의 다른 모션
Mesh Gradient (메시 그라디언트)
다른 이름 Animated mesh gradient
여러 색 점이 부드럽게 섞이며 떠다녀 유기적인 여러 색의 배경을 만듭니다.
쓰는 곳
랜딩 페이지 배경
[적용할 곳]에 메시 그라디언트(Mesh Gradient) 배경을 넣어 줘. 애니메이티드 메시 그라디언트(animated mesh gradient)라고도 불러.
부드러운 색 덩어리 여러 개가 서로 섞이며 영역 안을 천천히 떠다녀서, 배경이 유기적으로 계속 바뀌게 해 줘. 아주 느리고 부드럽게.
어떤 색이 섞여도 위의 콘텐츠가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Meteors (유성)
다른 이름 Meteor shower, Shooting Stars
빛나는 꼬리를 단 사선 줄기가 카드나 섹션을 가로질러 떨어집니다.
쓰는 곳
카드와 히어로 포인트
[적용할 곳]에 유성(Meteors) 효과를 넣어 줘. 유성우(meteor shower), 별똥별(shooting stars)이라고도 불러.
사라지는 꼬리를 단 작은 줄기 몇 개가 무작위 순간에 영역을 사선으로 빠르게 가로지르고 곧 사라지게 해 줘.
포인트로만 남도록 개수는 적게 하고, 영역 가장자리에서 잘리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Noise / Grain Texture (노이즈 / 그레인 텍스처)
다른 이름 Film grain, Noise background
미세한 점무늬 질감이 페이지를 덮고, 때로는 필름 그레인처럼 깜빡입니다.
쓰는 곳
그라디언트에 촉감 있는 깊이 더하기
[적용할 곳]에 노이즈 / 그레인 텍스처(Noise / Grain Texture) 오버레이를 넣어 줘. 필름 그레인(film grain), 노이즈 배경(noise background)이라고도 불러.
미세하고 옅은 점무늬 질감을 표면 위에 얹고, 필름 그레인처럼 작게 툭툭 깜빡이게 해 줘. 은은하게, 콘텐츠가 탁해 보일 만큼 강하지 않게.
클릭은 오버레이를 통과하게 하고, 질감은 매 프레임이 아니라 한 번만 만들고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춘 상태로 둬.