인터랙션

글자가 흩어졌다 제자리 찾는 텍스트 스크램블

무작위 문자로 흩어진 글자가 시차를 두고 제자리를 찾는 디코드 효과. RAF 프레임 큐로 글자마다 다른 타이밍에 풀린다.

ReactTypeScriptrequestAnimationFrameDOM innerHTML

라이브 데모

새 탭에서 열기

데모 불러오는 중…

제작 과정

한 줄 요약

무작위 문자로 흩어진 글자가 시차를 두고 제자리를 찾는 디코드 효과 RAF 프레임 큐로 라이브러리 없이 구현.

이럴 때 필요해요

히어로 헤드라인로딩 문구테크 톤 UI에 "기술적인" 인상을 한 줄로 입히고 싶을 때. 단순 페이드인보다 시선을 오래 잡고, 글자가 풀리는 과정 자체가 작은 스토리가 된다.

어떻게 동작하나

새 문구로 바뀔 때 글자별 { from, to, start, end } 큐를 만든다 startend가 무작위라 글자마다 푸는 시점이 달라 시차(stagger)가 공짜로 생긴다.
매 RAF 프레임마다 frame을 기준으로 각 글자가 from / 무작위 문자 / to 중 무엇을 보일지 정해 출력한다.
한글 칸엔 한글 무작위 음절을, 그 외 칸엔 기호를 넣는다 칸별 글자폭을 대상 글자에 맞춰 가로 흔들림(jitter)을 없앤다.
모든 글자가 to에 도달하면 잠깐 hold한 뒤 다음 문구로 같은 과정을 반복한다.

놓치기 쉬운 것

비례 폰트에선 무작위 문자마다 폭이 달라 글자가 가로로 떨린다 칸별 무작위 문자 종류를 대상 글자에 맞추거나 monospace를 쓴다.
per-frame DOM 갱신이라 React state는 부적합 innerHTML을 ref로 직접 write한다.
헤드라인 높이를 고정하지 않으면 문구 길이에 따라 레이아웃이 점프한다.
스크램블 중인 글자는 의미 없는 문자라 스크린리더가 읽으면 소음 중요한 콘텐츠라면 aria-label에 최종 텍스트를 따로 둔다.

이런 곳에 써요

히어로 헤드라인 등장 효과
로딩페이지 전환 문구
테크해커 톤 포트폴리오의 키워드 순환

소스 코드

· 데모 페이지에서 자동 추출

import type { Metadata } from "next";
import { TextScrambleDemo } from "./-components/TextScrambleDemo";

export const metadata: Metadata = {
  title: "텍스트 스크램블 (데모)",
  description:
    "글자가 무작위 문자로 흩어졌다 제자리를 찾는 디코드 효과. RAF 프레임 큐로 글자마다 시차 스크램블.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-slate-50">
      <TextScrambleDemo />
    </main>
  );
}

73조회수

댓글