흰 코어→컬러 헤일로로 겹친 text-shadow와 steps() 깜빡임으로 만드는 네온 사인.
한 줄 요약
타이트한 흰 코어부터 넓은 컬러 헤일로까지 여러 겹의 text-shadow를 쌓아 발광 튜브를 만들고, 세기는 --glow 변수 하나로 조절합니다.
레트로/이벤트/게임 무드의 강조 카피를 만들고 싶을 때 다크 테마 히어로 헤드라인.
맨 안쪽은 작은 blur의 흰색으로 튜브 코어를 만든다.
바깥으로 갈수록 blur를 키운 컬러로 헤일로를 깐다.
각 blur를 calc(var(--glow) * Npx)로 묶어 슬라이더로 일괄 조절한다.
steps() 키프레임으로 버징 깜빡임을, 전원 off는 --glow를 0으로.
그림자가 많을수록 페인트 비용이 크니 큰 텍스트에 남발하지 않는다.
깜빡임은 멀미를 유발하니 prefers-reduced-motion에서 끈다.
발광은 다크 배경에서만 제대로 읽힌다.
이벤트캠페인 랜딩 헤드라인
게임/엔터테인먼트 강조 라벨
import type { Metadata } from "next";
import { NeonGlowDemo } from "./-components/NeonGlowDemo";
export const metadata: Metadata = {
title: "네온 글로우 (데모)",
description:
"겹쳐 쌓은 text-shadow / box-shadow로 만든 네온 사인 — 색·발광 세기·깜빡임·적용 대상 조절, 전원 토글, CSS 복사.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-slate-950">
<NeonGlowDemo />
</main>
);
}