- {/* HERO */}
-
-
+
@@ -193,7 +230,7 @@ export default function HomePage() {
Build, style
@@ -248,45 +285,15 @@ export default function HomePage() {
- {/* Visual */}
+ {/* Visual — 3 switchable variants */}
-
-
+
+
+
-
-
-
+ {/* HERO — full-bleed; aurora + conic + grain stack so the radial gradient extends past the viewport */}
+
+
+
+
+
+
+
+
+
Build, style
- & ship React
+ &
apps composable.
@@ -248,45 +285,15 @@ export default function HomePage() {
-
+
-
-
-
- core · engine
-
-
- styler · 4.82 KB
-
-
- kinetic · 123 presets
-
-
- elements · 5 primitives
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{/* TICKER */}
('orbit')
+ const [fading, setFading] = useState(false)
+
+ const swap = (v: Variant) => {
+ if (v === active) return
+ setFading(true)
+ window.setTimeout(() => {
+ setActive(v)
+ setFading(false)
+ }, 220)
+ }
+
+ const cls = (v: Variant) =>
+ `vl-hv-variant${fading ? ' fading' : ''}${active === v ? '' : ' vl-hidden'}`
+
+ return (
+
+ {/* Variant A: Orbital */}
+
+ )
+}
diff --git a/src/components/landing/Mark.tsx b/src/components/landing/Mark.tsx
index bc9c052..1f9ca1e 100644
--- a/src/components/landing/Mark.tsx
+++ b/src/components/landing/Mark.tsx
@@ -74,25 +74,27 @@ type LockupProps = {
size?: number
gap?: number
variant?: MarkVariant
+ textSize?: number
className?: string
}
export function Lockup({
size = 36,
- gap = 14,
+ gap = 12,
variant = 'solid',
+ textSize,
className,
}: LockupProps) {
+ // Default the wordmark text to ~60% of mark height so it reads as a unit
+ // with the mark rather than as a small label next to a big symbol.
+ const fontSize = textSize ?? Math.round(size * 0.6)
return (
-
+
vitus·labs
diff --git a/src/components/landing/VerbRotator.tsx b/src/components/landing/VerbRotator.tsx
new file mode 100644
index 0000000..e9e231e
--- /dev/null
+++ b/src/components/landing/VerbRotator.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+const VERBS = ['ship', 'theme', 'test', 'animate', 'bundle']
+
+export function VerbRotator({
+ initial = VERBS[0],
+ intervalMs = 2600,
+ outMs = 420,
+}: {
+ initial?: string
+ intervalMs?: number
+ outMs?: number
+}) {
+ const [verb, setVerb] = useState(initial)
+ const [state, setState] = useState<'idle' | 'out' | 'in'>('idle')
+ const idxRef = useRef(VERBS.indexOf(initial))
+
+ useEffect(() => {
+ if (typeof document === 'undefined') return
+ const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+ if (reduced) return
+
+ const cycle = () => {
+ setState('out')
+ window.setTimeout(() => {
+ idxRef.current = (idxRef.current + 1) % VERBS.length
+ setVerb(VERBS[idxRef.current])
+ setState('in')
+ }, outMs)
+ }
+
+ const id = window.setInterval(cycle, intervalMs)
+ return () => window.clearInterval(id)
+ }, [intervalMs, outMs])
+
+ const cls = `vl-verb-slot${state !== 'idle' ? ` ${state}` : ''}`
+ return {verb}
+}
diff --git a/src/lib/layout.shared.tsx b/src/lib/layout.shared.tsx
index e19966a..c650c12 100644
--- a/src/lib/layout.shared.tsx
+++ b/src/lib/layout.shared.tsx
@@ -4,7 +4,7 @@ import { Lockup } from '@/components/landing/Mark'
export function baseOptions(): BaseLayoutProps {
return {
nav: {
- title:
+
+
+ {/* Variant B: Stack */}
+
+
+
+ core · engine
+
+
+ styler · 4.82 KB
+
+
+ kinetic · 123 presets
+
+
+ elements · 5 primitives
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Variant C: Pulse radar */}
+
+
+
+
+
+
+
+
+
+ core
+
+
+
+ styler
+
+
+
+ elements
+
+
+
+ kinetic
+
+
+
+
+
+ {/* Switcher */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+