그레인 얹은 오로라 그라디언트 랜딩 부품 9개
오로라 그라디언트는 어두운 배경 위에서 흐릿한 색 덩어리 여러 개가 오로라처럼 번지고, 그 위에 필름 그레인이 얹히는 랜딩 페이지 스타일입니다. AI가 만든 그래픽이 다 비슷하게 매끈해지자 디자이너들은 일부러 그레인
읽기히어로 섹션
용도
클레이모피즘 랜딩 UI 키트, 통통한 섹션 9개
클레이모피즘은 두꺼운 모서리 반경과 밝고 어두운 그림자를 한 면에 같이 얹어, 화면을 손으로 눌러 놓은 찰흙처럼 보이게 하는 디자인 스타일입니다.
키네틱 타이포그래피 랜딩페이지, 코드로 뜯어봤다
키네틱 타이포그래피는 헤드라인 글자가 화면 폭에 맞춰 커지고, 단어가 순서대로 튀어 오르고, 숫자가 굴러가듯 올라가는 디자인 방식입니다. 요즘 랜딩페이지 첫 화면을 다 이렇게 만들길래, 실제로 코드까지 뜯어서 아홉
다크 SaaS 랜딩에 스며든 리니어 디자인 시스템 9종
핀터레스트를 뒤덮은 리니어 디자인 시스템은 이슈 트래커 Linear.app이 쓰는 짙은 잉크 배경에 파란 글로우 하나로 포인트를 주는 다크 스타일입니다.
CSS 히어로 섹션 애니메이션 9종
히어로 섹션은 사이트에 들어가자마자 가장 먼저 보이는 큰 화면 하나, 큰 제목과 버튼이 자리 잡은 그 첫인상을 말한다. AOS·GSAP 없이, JS 0줄로 그 화면에 움직임을 주는 CSS 애니메이션 9가지를 모았다.
CSS 배경 애니메이션 효과 모음 9종 — 한 줄 복붙으로
CSS 배경 애니메이션 효과 모음은 눈·별·비·컨페티·거품·반딧불이·꽃잎·안개처럼 작은 조각 여러 개를 화면에 흩뿌려 각자 다른 자리에서 계속 움직이게 만드는 CSS 기법입니다. span 하나를 nth-child로
CSS 글자 그라데이션 반짝이는 텍스트 9종 — 한 줄 복붙으로
css 글자 그라데이션은 글씨 위에 여러 색을 흘려 넣어 단색 글자보다 시선을 오래 붙잡는 효과입니다. 아홉 개 중 하나(03)는 같은 글자를 뒤에 한 겹 더 깔아 후광만 blur 로 만드는데, 부모에 isolati
CSS 배경 애니메이션 9종 — 한 줄 복붙으로
CSS 배경 애니메이션은 히어로 섹션이나 카드 뒤에서 이미지 파일 없이 그라데이션·격자·점·노이즈 같은 패턴을 계속 움직이게 만드는 기법입니다. 아홉 개를 모았는데, 그중 하나는 커서를 따라가는 스포트라이트라 마우스
CSS 텍스트 애니메이션 효과 9종 — 한 줄 복붙으로
CSS 텍스트 애니메이션 효과는 자바스크립트 없이 CSS만으로 제목이나 문구가 움직이며 나타나거나 강조되는 짧은 연출입니다. 아홉 개 전부 transform·opacity·filter 세 가지 속성만 움직이고, 격자
CSS 타이핑 효과 9종 — 한 줄 복붙으로
CSS 타이핑 효과는 자바스크립트 라이브러리 없이 CSS만으로 문장이 한 글자씩 나타나거나 지워지는 것처럼 보이게 만드는 짧은 애니메이션입니다. 아래 아홉 개는 각각 다른 CSS 속성 하나에 기대고 있고, 필요한 건