# OBLT E-bike Header
A full-viewport, dark, cinematic e-bike product header for the brand **OBLT**, built in React (client component) with pure CSS and an interactive cursor-following "x-ray" spotlight reveal — moving the mouse wipes away the bike's exterior photo to expose its internal carbon/gearbox structure underneath. Built with React only (no animation libraries).
## Tech stack (libraries actually imported)
- React only — `useRef`, `useState`, and the `MouseEvent` type. No framer-motion, no GSAP, no icon library. All animation is hand-written CSS keyframes + an inline CSS `mask-image`.
- SVG icon (the CTA arrow) is hand-inlined, not from a library.
## Fonts & global styles
- Single Google font, imported inside a `<style>` block:
```
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
```
- Font stack: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`.
- `-webkit-font-smoothing: antialiased`. `box-sizing: border-box` applied to the root and all descendants (scoped to `.vt-header`, never global).
## Section container
- Root `<header className="vt-header">` is the mouse-tracking element (handlers: `onMouseEnter`, `onMouseMove`, `onMouseLeave`).
- Styles: `position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 32px 56px 44px; background-color: #272727; color: #fff;`.
- Internal vertical flow: top nav, then a flex-grow spacer "stage", then bottom content pinned to the base.
## Structure, section by section
### 1. Reveal background (`.vt-bg`, absolute inset:0, z-index 0, pointer-events:none)
Three stacked layers:
- **Base exterior image** (`.vt-bg-img`): the full bike exterior photo, `object-fit: cover; object-position: center;`, fills the layer. `user-select:none`, `-webkit-user-drag:none`, `referrerPolicy="no-referrer"`.
- **X-ray layer** (`.vt-bg-xray`, z-index 1): contains the bike x-ray/internal image (same cover/center sizing). This layer is masked by a radial gradient driven by cursor position (see Animations). `will-change: -webkit-mask-image, mask-image;` and `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`.
- **Veil overlay** (`.vt-bg-veil`, z-index 2): a vertical darkening gradient so text stays legible top & bottom:
```
linear-gradient(180deg, rgba(39,38,38,.62) 0%, rgba(39,38,38,.10) 26%, rgba(39,38,38,.10) 60%, rgba(39,38,38,.82) 100%)
```
### 2. Top nav (`.vt-nav`, z-index 30)
- `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;`.
- **Logo** (left, `.vt-logo`): text `OBLT` followed by a `.` span. `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;` (dot is also `#E0E1CC`).
- **Center menu** (`.vt-menu`, gap 40px): three links — `E-bikes`, `Features`, `Connect`. Each: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85; transition: opacity .2s ease;` hover → opacity 1.
- **Right cluster** (`.vt-nav-right`, gap 18px): an uppercase explore link plus a hamburger button.
- `.vt-explore` link text: `Explore the bike` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` hover → opacity .65.
- **Hamburger** (`.vt-burger`, hidden on desktop): 34×34px, three `#E0E1CC` bars 22×2px, radius 2px, gap 5px. On `.open`: bar 1 `translateY(7px) rotate(45deg)`, bar 2 `opacity:0`, bar 3 `translateY(-7px) rotate(-45deg)`. Transition `transform .25s ease, opacity .2s ease`.
- **Mobile dropdown** (`.vt-mobile-menu`, rendered only when `menuOpen`): absolutely positioned below the nav (`top:100%; margin-top:16px; z-index:40`), `background: rgba(20,19,19,.97); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 8px 18px;`. Links (`E-bikes`, `Features`, `Connect`, `Explore the bike`): `color:#E0E1CC; font-size:18px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08)`; last link `border-bottom:none; font-weight:700`. Each link closes the menu on click.
### 3. Stage spacer (`.vt-stage`, z-index 30, `flex: 1 1 0%`)
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`. In the current markup it is an empty `aria-hidden` spacer (the `.vt-hint` pulsing-dot styles exist in CSS but the hint element is not rendered).
- (Reference: `.vt-hint` styled as an uppercase 11px/600 label with a 36px circle dot, `border:1px solid rgba(46,211,176,.5); color:#2ed3b1;` running `vtPulse 1.8s ease-in-out infinite`.)
### 4. Bottom content (`.vt-bottom`, z-index 30)
12-column grid: `grid-template-columns: repeat(12, 1fr); align-items: end; gap: 18px 32px;`.
- **Headline** (`.vt-headline`, `grid-column: 1 / span 8`): `<h1>` containing the word-stagger component. h1 style: `color: #E0E1CC; font-weight: 500; font-size: clamp(36px, 7vw, 116px); line-height: 0.85; letter-spacing: -0.07em; white-space: nowrap; margin:0;`. Text: **Ready For The Ride**.
- **Right block** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
- Paragraph (verbatim): `An integrated gearbox, battery, and motor engineered in carbon and built to be seen. Every system, in the open.` Style: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);` animates in via `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both` with `animation-delay: .5s`.
- **CTA button** (`.vt-cta`): label **Reserve yours** plus a circular arrow. Pill: `color:#000; background:#E0E1CC; border:none; border-radius:9999px; padding:6px 6px 6px 22px; font-size: clamp(14px, 1vw, 16px); font-weight:500; display:inline-flex; align-items:center; gap:10px;`. Animates via `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both`, `animation-delay: .7s`. Hover → `gap: 14px`. Inner circle `.circ`: 40×40px, `border-radius:50%; background:#000;` containing the SVG (stroke `#E0E1CC`); on button hover `.circ` scales to `1.1` (`transition: transform .25s ease`).
## Assets (every URL)
- Exterior photo (base layer): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- X-ray / internals photo (revealed layer): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- CTA arrow icon: inline SVG, 16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, round caps/joins, path:
```
M5 12h14M13 6l6 6-6 6
```
## Animations
### Cursor "x-ray" spotlight (signature interaction)
- State: `hovering` (bool) and `pos` ({x,y} in px relative to the section's bounding rect). `handleMove` computes `e.clientX - rect.left`, `e.clientY - http://rect.top`.
- Constants: `RADIUS = 165` px (spotlight radius), `FEATHER = 45` px (soft edge). Inner fully-clear radius = `RADIUS - FEATHER` = 120px.
- The x-ray layer's `maskImage` / `WebkitMaskImage` is set inline. When hovering:
```
radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
```
When not hovering (collapsed to nothing):
```
radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
```
- Mask transitions at `.12s linear` so the reveal trails the cursor smoothly. NOTE: in CSS `mask`, opaque (`#000`) areas KEEP the layer — so the circle reveals the x-ray image while the rest of that layer is hidden (showing the exterior beneath).
### Headline word pull-up (`WordsPullUp` component)
- Splits the headline on spaces; each word is an `inline-block` span (`margin-right: 0.22em`, last word 0). Each word animates `wpuUp` with `cubic-bezier(.16,1,.3,1) both`, default `duration = 0.6s`, staggered by `delayStep = 0.08s` (`animationDelay: i * 0.08s`).
- Keyframes:
```
@keyframes wpuUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
- Optional superscript asterisk (`.wpu-ast`, `font-size:0.31em; vertical-align:top; top:0.15em; left:-0.05em;`) — not enabled here (`asterisk` defaults false).
- Respects `@media (prefers-reduced-motion: reduce)` → `.wpu-word { animation: none; }`.
### Fade-up for right block (`vtFadeUp`)
```
@keyframes vtFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
Paragraph delay `.5s`, CTA delay `.7s`; both `.8s cubic-bezier(.16,1,.3,1) both`.
### Pulse (defined for hint dot)
```
@keyframes vtPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.12);opacity:1} }
```
Applied `vtPulse 1.8s ease-in-out infinite`.
## Responsive
- **≤1000px**: padding `24px 28px 32px`; nav becomes `1fr auto` (logo + right); center `.vt-menu` and `.vt-explore` hidden; hamburger shown; `.vt-bottom` collapses to single column (`gap:16px`); headline & right span full width; `.vt-right` `transform:none; align-self:start; margin-top:4px; max-width:520px`.
- **≤600px**: padding `18px 20px 26px`; logo `font-size:22px`; headline `white-space:normal; font-size: clamp(40px, 13vw, 72px); line-height:0.92`; paragraph `font-size:15px; margin-bottom:16px`; CTA `font-size:14px; padding:5px 5px 5px 20px`; `.circ` 36×36px.
## Key design principles
- Dark stage (`#272727`) with a single warm-cream accent (`#E0E1CC`) and a teal accent (`#2ed3b1`) reserved for the (optional) pulse hint.
- The product reveal IS the hero: cursor acts as an x-ray torch over a layered photo pair.
- Editorial oversized headline (line-height 0.85, tight `-0.07em` tracking) anchored bottom-left; supporting copy + CTA bottom-right.
- Staggered, eased (`cubic-bezier(.16,1,.3,1)`) entrance for hierarchy.
## Common mistakes to avoid
- Don't invert the mask logic: opaque `#000` in the radial gradient REVEALS the x-ray layer; the transparent ring hides it. Getting this backwards shows internals everywhere except under the cursor.
- Keep `RADIUS - FEATHER` (120px) as the inner solid stop and `RADIUS` (165px) as the transparent stop — that 45px band is the soft feather.
- Mouse coordinates must be relative to the section rect (`getBoundingClientRect`), not the viewport.
- Mask transition is `.12s linear` only — a longer/eased transition makes the spotlight feel laggy.
- `white-space: nowrap` on the headline is intentional on desktop; only switch to `normal` at ≤600px.
- Scope all resets and the Almarai `@import` to the component; do not touch global `body`/`html`.
## Page title
OBLT — Ready For The Ride
## Integration (build-safety — do not skip)
- Add this section as a **new** component file with a unique name. Don't edit or overwrite any existing file except to add its import and render it.
- Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them.
- If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don't re-scaffold or change the Tailwind/build config or version.
- Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font.
- Install only the libraries this section names.
한국어 번역
# OBLT E-bike 헤더
브랜드 **OBLT**를 위한 풀 뷰포트, 다크, 시네마틱 E-bike 제품 헤더로, React(클라이언트 컴포넌트)와 순수 CSS로 구현했으며, 커서를 따라가는 인터랙티브 "엑스레이" 스포트라이트 리빌을 갖추고 있다 — 마우스를 움직이면 자전거 외관 사진이 지워지면서 그 아래의 내부 카본/기어박스 구조가 드러난다. React만으로 제작했다(애니메이션 라이브러리 없음).
## 기술 스택 (실제로 임포트한 라이브러리)
- React만 — `useRef`, `useState`, `MouseEvent` 타입. framer-motion 없음, GSAP 없음, 아이콘 라이브러리 없음. 모든 애니메이션은 직접 작성한 CSS 키프레임 + 인라인 CSS `mask-image`이다.
- SVG 아이콘(CTA 화살표)은 라이브러리에서 가져오지 않고 직접 인라인으로 넣었다.
## 폰트 및 전역 스타일
- Google 폰트 하나를 `<style>` 블록 안에서 임포트:
```
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
```
- 폰트 스택: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`.
- `-webkit-font-smoothing: antialiased`. `box-sizing: border-box`를 루트와 모든 하위 요소에 적용(`.vt-header`로 스코프를 한정했고, 전역으로는 절대 적용하지 않았다).
## 섹션 컨테이너
- 루트 `<header className="vt-header">`가 마우스를 추적하는 요소이다(핸들러: `onMouseEnter`, `onMouseMove`, `onMouseLeave`).
- 스타일: `position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 32px 56px 44px; background-color: #272727; color: #fff;`.
- 내부 세로 흐름: 상단 내비, 그다음 flex-grow 스페이서인 "스테이지", 그다음 베이스에 고정된 하단 콘텐츠.
## 구조, 섹션별로
### 1. 리빌 배경 (`.vt-bg`, absolute inset:0, z-index 0, pointer-events:none)
세 개의 적층 레이어:
- **기본 외관 이미지** (`.vt-bg-img`): 자전거 전체 외관 사진으로, `object-fit: cover; object-position: center;`이며 레이어를 채운다. `user-select:none`, `-webkit-user-drag:none`, `referrerPolicy="no-referrer"`.
- **엑스레이 레이어** (`.vt-bg-xray`, z-index 1): 자전거 엑스레이/내부 이미지를 담는다(동일한 cover/center 사이징). 이 레이어는 커서 위치로 구동되는 방사형 그라디언트로 마스킹된다(애니메이션 참고). `will-change: -webkit-mask-image, mask-image;` 그리고 `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`.
- **베일 오버레이** (`.vt-bg-veil`, z-index 2): 상·하단에서 텍스트가 읽히도록 하는 세로 방향 어둡게 하기 그라디언트:
```
linear-gradient(180deg, rgba(39,38,38,.62) 0%, rgba(39,38,38,.10) 26%, rgba(39,38,38,.10) 60%, rgba(39,38,38,.82) 100%)
```
### 2. 상단 내비 (`.vt-nav`, z-index 30)
- `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;`.
- **로고** (왼쪽, `.vt-logo`): `OBLT` 텍스트 뒤에 `.` span. `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;` (점도 `#E0E1CC`).
- **중앙 메뉴** (`.vt-menu`, gap 40px): 링크 세 개 — `E-bikes`, `Features`, `Connect`. 각각: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85; transition: opacity .2s ease;` 호버 → opacity 1.
- **오른쪽 클러스터** (`.vt-nav-right`, gap 18px): 대문자 탐색 링크와 햄버거 버튼.
- `.vt-explore` 링크 텍스트: `Explore the bike` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` 호버 → opacity .65.
- **햄버거** (`.vt-burger`, 데스크톱에서는 숨김): 34×34px, `#E0E1CC` 막대 세 개 22×2px, radius 2px, gap 5px. `.open`일 때: 막대 1 `translateY(7px) rotate(45deg)`, 막대 2 `opacity:0`, 막대 3 `translateY(-7px) rotate(-45deg)`. 트랜지션 `transform .25s ease, opacity .2s ease`.
- **모바일 드롭다운** (`.vt-mobile-menu`, `menuOpen`일 때만 렌더링): 내비 아래에 절대 위치(`top:100%; margin-top:16px; z-index:40`), `background: rgba(20,19,19,.97); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 8px 18px;`. 링크(`E-bikes`, `Features`, `Connect`, `Explore the bike`): `color:#E0E1CC; font-size:18px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08)`; 마지막 링크는 `border-bottom:none; font-weight:700`. 각 링크는 클릭 시 메뉴를 닫는다.
### 3. 스테이지 스페이서 (`.vt-stage`, z-index 30, `flex: 1 1 0%`)
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`. 현재 마크업에서는 빈 `aria-hidden` 스페이서이다(`.vt-hint` 펄스 점 스타일은 CSS에 존재하지만 힌트 요소는 렌더링되지 않는다).
- (참고: `.vt-hint`는 대문자 11px/600 라벨에 36px 원형 점을 붙인 스타일로, `border:1px solid rgba(46,211,176,.5); color:#2ed3b1;`이며 `vtPulse 1.8s ease-in-out infinite`를 실행한다.)
### 4. 하단 콘텐츠 (`.vt-bottom`, z-index 30)
12컬럼 그리드: `grid-template-columns: repeat(12, 1fr); align-items: end; gap: 18px 32px;`.
- **헤드라인** (`.vt-headline`, `grid-column: 1 / span 8`): 워드 스태거 컴포넌트를 담은 `<h1>`. h1 스타일: `color: #E0E1CC; font-weight: 500; font-size: clamp(36px, 7vw, 116px); line-height: 0.85; letter-spacing: -0.07em; white-space: nowrap; margin:0;`. 텍스트: **Ready For The Ride**.
- **오른쪽 블록** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
- 문단(원문 그대로): `An integrated gearbox, battery, and motor engineered in carbon and built to be seen. Every system, in the open.` 스타일: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);` `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both`에 `animation-delay: .5s`로 등장한다.
- **CTA 버튼** (`.vt-cta`): 라벨 **Reserve yours**와 원형 화살표. 필: `color:#000; background:#E0E1CC; border:none; border-radius:9999px; padding:6px 6px 6px 22px; font-size: clamp(14px, 1vw, 16px); font-weight:500; display:inline-flex; align-items:center; gap:10px;`. `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both`, `animation-delay: .7s`로 등장. 호버 → `gap: 14px`. 내부 원 `.circ`: 40×40px, `border-radius:50%; background:#000;`이며 SVG(스트로크 `#E0E1CC`)를 담는다. 버튼 호버 시 `.circ`가 `1.1`로 스케일된다(`transition: transform .25s ease`).
## 에셋 (모든 URL)
- 외관 사진(기본 레이어): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- 엑스레이 / 내부 사진(드러나는 레이어): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- CTA 화살표 아이콘: 인라인 SVG, 16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, 둥근 캡/조인, 경로:
```
M5 12h14M13 6l6 6-6 6
```
## 애니메이션
### 커서 "엑스레이" 스포트라이트 (시그니처 인터랙션)
- 상태: `hovering`(bool)과 `pos`(섹션의 바운딩 렉트 기준 px 단위 {x,y}). `handleMove`는 `e.clientX - rect.left`, `e.clientY - http://rect.top`을 계산한다.
- 상수: `RADIUS = 165` px(스포트라이트 반지름), `FEATHER = 45` px(부드러운 가장자리). 내부 완전 투명 반지름 = `RADIUS - FEATHER` = 120px.
- 엑스레이 레이어의 `maskImage` / `WebkitMaskImage`는 인라인으로 설정된다. 호버 중일 때:
```
radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
```
호버하지 않을 때(아무것도 없는 상태로 축소):
```
radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
```
- 마스크는 `.12s linear`로 트랜지션되어 리빌이 커서를 부드럽게 뒤따른다. 참고: CSS `mask`에서 불투명한(`#000`) 영역은 레이어를 유지한다 — 따라서 원이 엑스레이 이미지를 드러내는 동안 그 레이어의 나머지 부분은 숨겨져 아래의 외관이 보인다.
### 헤드라인 워드 풀업 (`WordsPullUp` 컴포넌트)
- 헤드라인을 공백 기준으로 나누며, 각 단어는 `inline-block` span이다(`margin-right: 0.22em`, 마지막 단어는 0). 각 단어는 `wpuUp`을 `cubic-bezier(.16,1,.3,1) both`로 애니메이션하며, 기본 `duration = 0.6s`, `delayStep = 0.08s`만큼 스태거된다(`animationDelay: i * 0.08s`).
- 키프레임:
```
@keyframes wpuUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
- 선택적 위첨자 별표(`.wpu-ast`, `font-size:0.31em; vertical-align:top; top:0.15em; left:-0.05em;`) — 여기서는 활성화되지 않았다(`asterisk` 기본값 false).
- `@media (prefers-reduced-motion: reduce)`를 존중한다 → `.wpu-word { animation: none; }`.
### 오른쪽 블록 페이드업 (`vtFadeUp`)
```
@keyframes vtFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
문단 지연 `.5s`, CTA 지연 `.7s`; 둘 다 `.8s cubic-bezier(.16,1,.3,1) both`.
### 펄스 (힌트 점용으로 정의됨)
```
@keyframes vtPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.12);opacity:1} }
```
`vtPulse 1.8s ease-in-out infinite` 적용.
## 반응형
- **≤1000px**: 패딩 `24px 28px 32px`; 내비는 `1fr auto`(로고 + 오른쪽)가 된다; 중앙 `.vt-menu`와 `.vt-explore`는 숨김; 햄버거 표시; `.vt-bottom`은 단일 컬럼으로 붕괴(`gap:16px`); 헤드라인과 오른쪽은 전체 폭 차지; `.vt-right`는 `transform:none; align-self:start; margin-top:4px; max-width:520px`.
- **≤600px**: 패딩 `18px 20px 26px`; 로고 `font-size:22px`; 헤드라인 `white-space:normal; font-size: clamp(40px, 13vw, 72px); line-height:0.92`; 문단 `font-size:15px; margin-bottom:16px`; CTA `font-size:14px; padding:5px 5px 5px 20px`; `.circ` 36×36px.
## 핵심 디자인 원칙
- 어두운 스테이지(`#272727`)에 단 하나의 따뜻한 크림색 악센트(`#E0E1CC`), 그리고 (선택적) 펄스 힌트용으로 남겨둔 틸 악센트(`#2ed3b1`).
- 제품 리빌이 곧 히어로다: 커서가 적층된 사진 쌍 위에서 엑스레이 토치 역할을 한다.
- 에디토리얼한 초대형 헤드라인(행간 0.85, 타이트한 `-0.07em` 자간)을 좌하단에 고정하고, 보조 카피 + CTA는 우하단에 둔다.
- 위계를 위해 스태거되고 이징된(`cubic-bezier(.16,1,.3,1)`) 등장을 사용한다.
## 피해야 할 흔한 실수
- 마스크 로직을 뒤집지 말 것: 방사형 그라디언트의 불투명 `#000`은 엑스레이 레이어를 드러내고, 투명한 링은 그것을 숨긴다. 이걸 거꾸로 하면 커서 아래를 제외한 모든 곳에서 내부가 보인다.
- `RADIUS - FEATHER`(120px)를 내부 솔리드 스톱으로, `RADIUS`(165px)를 투명 스톱으로 유지할 것 — 그 45px 밴드가 부드러운 페더이다.
- 마우스 좌표는 뷰포트가 아니라 섹션 렉트(`getBoundingClientRect`) 기준이어야 한다.
- 마스크 트랜지션은 `.12s linear`만이다 — 더 길거나 이징된 트랜지션은 스포트라이트를 굼떠 보이게 만든다.
- 데스크톱에서 헤드라인의 `white-space: nowrap`은 의도된 것이다; ≤600px에서만 `normal`로 바꾼다.
- 모든 리셋과 Almarai `@import`는 컴포넌트로 스코프할 것; 전역 `body`/`html`은 건드리지 말 것.
## 페이지 제목
OBLT — Ready For The Ride
## 통합 (빌드 안전성 — 건너뛰지 말 것)
- 이 섹션을 고유한 이름의 **새** 컴포넌트 파일로 추가할 것. 임포트를 추가하고 렌더링하는 것 외에는 기존 파일을 편집하거나 덮어쓰지 말 것.
- 모든 기존 섹션 **뒤에** 렌더링할 것; 이전에 만든 모든 섹션은 그대로 유지 — 절대 교체하거나 제거하지 말 것.
- 프로젝트가 없으면 최소한의 React + Tailwind 앱을 만들 것; 있으면 그대로 사용 — 스캐폴딩을 다시 하거나 Tailwind/빌드 설정 또는 버전을 바꾸지 말 것.
- 자체 완결적으로 유지할 것: 폰트와 모든 리셋을 이 섹션으로 스코프할 것; 전역 `body`/`html`/`*` 스타일이나 전역 폰트를 절대 설정하지 말 것.
- 이 섹션이 명시한 라이브러리만 설치할 것.
