히어로·타이포

히어로 타이틀 단어를 타이핑·삭제하며 순환. SSR은 첫 단어 전체라 SEO·no-JS 안전.

사방에서 날아온 빛 입자가 워드마크를 조립 → 점화 → 홀드 → 페이드로 걷히는 진입 연출. 스크롤·클릭·키 입력 시 즉시 스킵.

대형 워드마크가 글자 하나씩 마스크를 뚫고 차오른 뒤 막이 걷히는 진입 연출. variant로 걷히는 방식 4종(리프트·스플릿·와이프·아이리스) 선택. 캔버스 없이 CSS만으로 가벼움. particle-intro의 심플·경량 대안.

무작위 문자가 바뀌다가 왼쪽부터 최종 텍스트로 정착한다. 마운트 또는 포인터 올리기로 효과를 시작한다.

대각선 그라디언트가 텍스트 위를 반복 스윕하는 은은한 빛 효과. background-clip:text만으로 순수 CSS, 서버 컴포넌트로도 동작.

공항 전광판처럼 글자마다 세로 릴이 무작위 문자를 훑고 지나가다 최종 글자에서 멈춘다. CSS steps() 애니메이션, aria-label로 실제 텍스트만 스크린리더에 노출.

윤곽선만 보이던 글자가 화면에 들어오면 한 번 안쪽부터 채워진다. 텍스트는 처음부터 DOM에 렌더링한다.

간판 네온사인처럼 여러 겹 글로우 + 불규칙 플리커. 순수 CSS(text-shadow 레이어), 라이트/다크 톤 자동 전환. reduced-motion이면 상시 점등.

글자가 차례로 떠올랐다 가라앉는 반복 효과. 글자를 일정한 순서로 나누고 CSS로 움직인다.

대형 풍경 사진 위 중앙 카피와 하단 탐험 지표를 겹치는 몰입형 히어로. 이미지에 충분한 어둠과 그라디언트를 더해 사진이 바뀌어도 텍스트 대비를 유지하고 모바일에서는 카피를 하단 정렬한다.

건축 사진의 큰 여백을 세리프 타이포와 세로 사이드 레일로 사용하는 매거진형 히어로. 본문·링크·메타데이터가 서로 다른 축에 놓여 일반적인 중앙 정렬 랜딩과 다른 편집 리듬을 만든다.

어두운 스튜디오 제품 사진 위에 제품명·CTA·기술 사양·부품 마커를 배치하는 런칭 히어로. 모바일에서는 제품을 상단에 남기고 카피와 스펙 패널을 아래로 모아 시선을 분리한다.

원형 공간 이미지와 느리게 도는 궤도선을 결합해 다음 장면으로 진입하는 감각을 만드는 히어로. 왼쪽 카피는 어두운 벽에, 이미지의 밝은 포털은 오른쪽에 남겨 메시지와 목적지가 한 화면에 공존한다.

하나의 자연 사진을 흐린 풀블리드 배경과 선명한 세로 카드로 두 번 사용해 편집 콜라주를 만든다. 인용문·좌표·페이지 인덱스가 더해져 여행·리조트·라이프스타일 브랜드에 어울린다.

세 장의 고해상도 이미지를 자동 크로스페이드·느린 확대·카피 전환으로 엮어 영상처럼 재생하는 히어로. 실제 비디오 코덱 없이도 가볍게 배포할 수 있고, 이전·다음·일시정지·직접 선택 제어를 모두 제공한다.

포인터를 따라 움직이는 원형 렌즈 안에 두 번째 이미지를 보여주는 히어로. 누르는 동안 렌즈가 커지고 버튼으로 두 번째 장면을 화면 전체에 고정할 수 있다.

서로 다른 네 장면을 세로 패널에 배치하고 포인터나 키보드 초점이 닿은 패널을 넓힌다. 선택한 장면에 맞춰 제목, 설명, 채도가 바뀐다.

풀블리드 배경 대신 거대한 글자 자체를 세 개의 움직이는 장면을 보여주는 창으로 사용한다. 텍스처는 자동으로 교차하고 포인터 위치가 글자 안 이미지의 초점을 바꿔 타이포와 비주얼을 하나의 인터랙션으로 결합한다.

문구를 직접 입력하고 굵기, 크기, 자간, 행간을 함께 조절한다. 본문·포스터·캡션 설정을 오가며 같은 문장의 밀도와 위계가 어떻게 달라지는지 비교한다.

문구를 글자 단위로 나누고 낙하·파동·맥박의 시간 배열을 적용한다. 재생, 정지, 다시 재생으로 글자를 읽는 순서와 리듬을 조율한다.

제목 배율, 본문 너비, 단 수, 정렬과 서체 조합을 바꾸며 긴 글의 읽기 구조를 설계한다. 제목만 키우지 않고 여백과 행 길이를 함께 비교한다.

실제 SVG 텍스트를 여러 원형 경로에 배치하고 회전 속도, 방향, 고리 수를 조절한다. 확대해도 선명한 곡선 조판과 정지 상태를 함께 제공한다.