Aurora Background (오로라 배경)
다른 이름 Northern lights gradient
흐릿하고 부드러운 색 띠가 오로라처럼 콘텐츠 뒤에서 일렁입니다.
쓰는 곳
히어로 섹션
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 오로라 배경(Aurora Background)을 넣어 줘. 노던 라이츠 그라디언트(northern lights gradient)라고도 불러.
흐릿하고 부드러운 색 띠들이 콘텐츠 뒤에서 천천히 떠다니고 흔들리며, 서로 겹치고 섞여 북극광처럼 보이게 해 줘. 아주 느리고 몽환적으로.
위에 있는 글자는 잘 읽히게 하고, 부드럽게 돌아가도록 매 프레임마다 띠에 블러를 다시 걸지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.비슷한 모션
Mesh Gradient (메시 그라디언트)
다른 이름 Animated mesh gradient
여러 색 점이 부드럽게 섞이며 떠다녀 유기적인 여러 색의 배경을 만듭니다.
쓰는 곳
랜딩 페이지 배경
[적용할 곳]에 메시 그라디언트(Mesh Gradient) 배경을 넣어 줘. 애니메이티드 메시 그라디언트(animated mesh gradient)라고도 불러.
부드러운 색 덩어리 여러 개가 서로 섞이며 영역 안을 천천히 떠다녀서, 배경이 유기적으로 계속 바뀌게 해 줘. 아주 느리고 부드럽게.
어떤 색이 섞여도 위의 콘텐츠가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Animated Gradient (그라디언트 애니메이션)
다른 이름 Gradient animation, Moving gradient, Background gradient animation
그라디언트 배경의 색이 천천히 바뀌거나 흐르거나 회전합니다.
쓰는 곳
히어로 배경, 버튼
[적용할 곳]에 그라디언트 애니메이션(Animated Gradient) 배경을 넣어 줘. 무빙 그라디언트(moving gradient), gradient animation이라고도 불러.
그라디언트 색이 영역을 가로질러 천천히, 부드럽게 끊김 없이 흘러가고, 루프가 다시 시작될 때 튀는 부분이 보이지 않게 해 줘.
위에 올라간 글자가 어느 색 위에서도 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Light Rays (라이트 레이)
다른 이름 God rays, Light shafts
부드러운 빛줄기가 배경 위에서 흔들립니다.
쓰는 곳
분위기 있는 헤더
[적용할 곳]에 라이트 레이(Light Rays) 배경을 넣어 줘. 갓 레이(god rays), 라이트 샤프트(light shafts)라고도 불러.
부드럽고 반투명한 빛줄기 여러 개가 위에서 부채꼴로 퍼지고, 조금씩 밝아졌다 어두워지며 좌우로 은은하게 흔들리게 해 줘. 느리고 분위기 있게.
빛줄기는 콘텐츠 뒤에 두고 가독성을 해치지 않을 만큼 흐리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Wave Background (웨이브 배경)
다른 이름 Wavy background, Animated waves
겹겹이 쌓인 물결선이나 물결 모양이 가로로 일렁입니다.
쓰는 곳
섹션 구분선, 히어로 하단
[적용할 곳]에 웨이브 배경(Wave Background)을 넣어 줘. 웨이비 배경(wavy background), 애니메이티드 웨이브(animated waves)라고도 불러.
겹쳐진 물결 몇 개가 조금씩 다른 속도로 옆으로 흘러가면서 물처럼 겹치고 움직이게 해 줘. 느리고 부드럽게.
물결마다 튀는 곳 없이 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.Background & Ambient의 다른 모션
Background Beams (배경 빔)
다른 이름 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
가늘게 빛나는 선이 경로를 따라 이동하고, 때로는 표면에 부딪혀 터집니다.
쓰는 곳
히어로 배경
[적용할 곳]에 배경 빔(Background Beams) 효과를 넣어 줘. 라이트 빔(light beams), 배경 라인(background lines)이라고도 불러.
흐린 곡선 경로들을 배경에 깔고, 그 위로 짧게 빛나는 줄기가 하나씩 차분하고 일정한 속도로 지나가게 해 줘.
빔들은 시차를 둬서 절대 한꺼번에 움직이지 않게 하고, 콘텐츠 뒤에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.마우스를 올려 보세요
Background Boxes (배경 박스)
다른 이름 Tile hover background
비스듬한 타일 격자가 포인터가 지나갈 때마다 색으로 밝아집니다.
쓰는 곳
히어로 배경
[적용할 곳]에 배경 박스(Background Boxes) 효과를 넣어 줘. 타일 호버 배경(tile hover background)이라고도 불러.
영역을 비스듬한 타일 격자로 채우고, 포인터가 지나간 타일은 바로 밝아졌다가 천천히 돌아가서 짧은 자취가 남게 해 줘.
타일은 콘텐츠 뒤에 두어 클릭을 막지 않게 하고, 터치 기기에서는 탭한 타일이 밝아지게 해 줘.A
Border Beam (보더 빔)
다른 이름 Shine border, Animated border, Glowing effect, Moving Border
밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.
쓰는 곳
추천 카드, CTA
[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.