refactor(reticle): rename Reticle to ReticleLogo, add reticle swap prop

src/app/design/page.tsx

@@ -33,7 +33,7 @@ import { Hud } from '@/components/atoms/hud'
 import { Icon } from '@/components/atoms/icon'
 import { Logo } from '@/components/atoms/logo'
 import { Marquee } from '@/components/atoms/marquee'
-import { Reticle } from '@/components/atoms/reticle'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { Signature } from '@/components/atoms/signature'
 import { Ticker } from '@/components/atoms/ticker'
 import { Bio } from '@/components/molecules/bio'
@@ -216,7 +216,7 @@ const DesignPage = () => {
     <Main>
       <Section id="design-hero">
         <DesignHero
-          reticleVariant="branded"
+          reticle="logo"
           hudProps={{
             title: 'D.0 / Design System //',
             subtitle: '// Living Styleguide',
@@ -369,7 +369,7 @@ const DesignPage = () => {
               </Marquee>
             </div>
             <div className="overflow-hidden border-t pt-8">
-              <Reticle className="mx-auto w-full max-w-xl" />
+              <ReticleLogo className="mx-auto w-full max-w-xl" />
             </div>
           </div>
         </Board>

src/components/atoms/reticle-dial.tsx

@@ -24,16 +24,13 @@ const styles = {
 }
 
 type ReticleDialReadout = {
-  /** Small caps label above the value, e.g. a designation or unit. */
   label: string
-  /** The real value the label describes; never a placeholder. */
   value: string
 }
 
 type ReticleDialRef = SVGSVGElement
 type ReticleDialProps = SVGAttributes<ReticleDialRef> &
   VariantProps<typeof styles.root> & {
-    /** Boxed readouts on the side rails: index 0 left, index 1 right. Real data only. */
     readouts?: ReticleDialReadout[]
   }
 

src/components/atoms/reticle.tsx → src/components/atoms/reticle-logo.tsx

@@ -32,10 +32,10 @@ const styles = {
   ])
 }
 
-type ReticleRef = SVGSVGElement
-type ReticleProps = SVGAttributes<ReticleRef> & VariantProps<typeof styles.root>
+type ReticleLogoRef = SVGSVGElement
+type ReticleLogoProps = SVGAttributes<ReticleLogoRef> & VariantProps<typeof styles.root>
 
-const Reticle = forwardRef<ReticleRef, ReticleProps>((props, ref) => {
+const ReticleLogo = forwardRef<ReticleLogoRef, ReticleLogoProps>((props, ref) => {
   // props
   const { className, ...rest } = props
 
@@ -148,7 +148,7 @@ const Reticle = forwardRef<ReticleRef, ReticleProps>((props, ref) => {
     </svg>
   )
 })
-Reticle.displayName = 'Reticle'
+ReticleLogo.displayName = 'ReticleLogo'
 
-export { Reticle }
-export type { ReticleProps, ReticleRef }
+export { ReticleLogo }
+export type { ReticleLogoProps, ReticleLogoRef }

src/components/molecules/tile.tsx

@@ -7,33 +7,42 @@ import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
   root: cva(['relative size-full p-4', 'flex items-center justify-center']),
-  tile: cva(['bg-background rounded-sm', 'relative aspect-video h-8/10 w-auto overflow-hidden'], {
-    variants: {
-      loaded: {
-        true: 'animate-boot-in fill-mode-both opacity-100 motion-reduce:animate-none',
-        false: 'opacity-0'
+  tile: cva(
+    ['group bg-background rounded-sm', 'relative aspect-video h-8/10 w-auto overflow-hidden'],
+    {
+      variants: {
+        loaded: {
+          true: 'animate-boot-in fill-mode-both opacity-100 motion-reduce:animate-none',
+          false: 'opacity-0'
+        }
+      },
+      defaultVariants: {
+        loaded: false
       }
-    },
-    defaultVariants: {
-      loaded: false
     }
-  }),
+  ),
   img: cva([
     'absolute inset-0 size-full object-cover',
-    'opacity-15 hover:scale-102 hover:opacity-30',
-    'transition-all duration-1000'
+    'opacity-15 transition-all duration-1000',
+    'group-hover:scale-102 group-hover:opacity-100'
+  ]),
+  logo: cva([
+    'pointer-events-none absolute inset-0 m-auto h-auto w-1/6 object-contain',
+    'transition-opacity duration-500 group-hover:opacity-0'
   ])
 }
 
 type TileRef = HTMLDivElement
 type TileProps = HTMLAttributes<TileRef> &
   VariantProps<typeof styles.root> & {
     asset: AssetEntry
+    /** Overlaid client logo, faded out on the same hover that fades the image in. */
+    logo?: AssetEntry
   }
 
 const Tile = forwardRef<TileRef, TileProps>((props, ref) => {
   // props
-  const { asset, className, ...rest } = props
+  const { asset, logo, className, ...rest } = props
 
   // hooks
   const [loaded, setLoaded] = useState(false)
@@ -43,6 +52,7 @@ const Tile = forwardRef<TileRef, TileProps>((props, ref) => {
     <div ref={ref} className={cn(styles.root({ className }))} aria-hidden {...rest}>
       <div className={cn(styles.tile({ loaded }))}>
         <Asset className={cn(styles.img())} asset={asset} onLoad={() => setLoaded(true)} />
+        {!!logo && <Asset className={cn(styles.logo())} asset={logo} />}
       </div>
     </div>
   )

src/components/organisms/about-hero.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Intro, type IntroProps } from '@/components/atoms/intro'
-import { Reticle } from '@/components/atoms/reticle'
 import { ReticleDial, type ReticleDialReadout } from '@/components/atoms/reticle-dial'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
@@ -17,30 +17,22 @@ type AboutHeroProps = HTMLAttributes<AboutHeroRef> &
     hudProps: HudProps
     introProps: IntroProps
     /** Which reticle atom to render. Defaults to the tick-dial variant. */
-    reticleVariant?: 'dial' | 'branded'
+    reticle?: 'dial' | 'logo'
     /** Boxed readouts on the reticle's side rails, dial variant only. Real data only. */
     readouts?: ReticleDialReadout[]
   }
 
 const AboutHero = forwardRef<AboutHeroRef, AboutHeroProps>((props, ref) => {
   // props
-  const {
-    hudProps,
-    introProps,
-    reticleVariant = 'dial',
-    readouts,
-    children,
-    className,
-    ...rest
-  } = props
+  const { hudProps, introProps, reticle = 'dial', readouts, children, className, ...rest } = props
 
   // jsx
   return (
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
-      {reticleVariant === 'dial' ? (
+      {reticle === 'dial' ? (
         <ReticleDial className={cn(styles.reticle())} readouts={readouts} />
       ) : (
-        <Reticle className={cn(styles.reticle())} />
+        <ReticleLogo className={cn(styles.reticle())} />
       )}
       <Hud {...hudProps} />
       <Intro className={cn(styles.intro())} {...introProps}>

src/components/organisms/design-hero.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Intro, type IntroProps } from '@/components/atoms/intro'
-import { Reticle } from '@/components/atoms/reticle'
 import { ReticleDial, type ReticleDialReadout } from '@/components/atoms/reticle-dial'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
@@ -17,30 +17,22 @@ type DesignHeroProps = HTMLAttributes<DesignHeroRef> &
     hudProps: HudProps
     introProps: IntroProps
     /** Which reticle atom to render. Defaults to the tick-dial variant. */
-    reticleVariant?: 'dial' | 'branded'
+    reticle?: 'dial' | 'logo'
     /** Boxed readouts on the reticle's side rails, dial variant only. Real data only. */
     readouts?: ReticleDialReadout[]
   }
 
 const DesignHero = forwardRef<DesignHeroRef, DesignHeroProps>((props, ref) => {
   // props
-  const {
-    hudProps,
-    introProps,
-    reticleVariant = 'dial',
-    readouts,
-    children,
-    className,
-    ...rest
-  } = props
+  const { hudProps, introProps, reticle = 'dial', readouts, children, className, ...rest } = props
 
   // jsx
   return (
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
-      {reticleVariant === 'dial' ? (
+      {reticle === 'dial' ? (
         <ReticleDial className={cn(styles.reticle())} readouts={readouts} />
       ) : (
-        <Reticle className={cn(styles.reticle())} />
+        <ReticleLogo className={cn(styles.reticle())} />
       )}
       <Hud {...hudProps} />
       <Intro className={cn(styles.intro())} {...introProps}>

src/components/organisms/error-hero.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Intro, type IntroProps } from '@/components/atoms/intro'
-import { Reticle } from '@/components/atoms/reticle'
 import { ReticleDial, type ReticleDialReadout } from '@/components/atoms/reticle-dial'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
@@ -17,31 +17,23 @@ type ErrorHeroProps = HTMLAttributes<ErrorHeroRef> &
     hudProps: HudProps
     introProps: IntroProps
     /** Which reticle atom to render. Defaults to the tick-dial variant. */
-    reticleVariant?: 'dial' | 'branded'
+    reticle?: 'dial' | 'logo'
     /** Boxed readouts on the reticle's side rails, dial variant only. Real data only. */
     readouts?: ReticleDialReadout[]
     children?: ReactNode
   }
 
 const ErrorHero = forwardRef<ErrorHeroRef, ErrorHeroProps>((props, ref) => {
   // props
-  const {
-    hudProps,
-    introProps,
-    reticleVariant = 'dial',
-    readouts,
-    children,
-    className,
-    ...rest
-  } = props
+  const { hudProps, introProps, reticle = 'dial', readouts, children, className, ...rest } = props
 
   // jsx
   return (
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
-      {reticleVariant === 'dial' ? (
+      {reticle === 'dial' ? (
         <ReticleDial className={cn(styles.reticle())} readouts={readouts} />
       ) : (
-        <Reticle className={cn(styles.reticle())} />
+        <ReticleLogo className={cn(styles.reticle())} />
       )}
       <Hud {...hudProps} />
       <Intro className={cn(styles.intro())} {...introProps}>

src/components/organisms/experience-hero.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Intro, type IntroProps } from '@/components/atoms/intro'
-import { Reticle } from '@/components/atoms/reticle'
 import { ReticleDial, type ReticleDialReadout } from '@/components/atoms/reticle-dial'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
@@ -17,30 +17,22 @@ type ExperienceHeroProps = HTMLAttributes<ExperienceHeroRef> &
     hudProps: HudProps
     introProps: IntroProps
     /** Which reticle atom to render. Defaults to the tick-dial variant. */
-    reticleVariant?: 'dial' | 'branded'
+    reticle?: 'dial' | 'logo'
     /** Boxed readouts on the reticle's side rails, dial variant only. Real data only. */
     readouts?: ReticleDialReadout[]
   }
 
 const ExperienceHero = forwardRef<ExperienceHeroRef, ExperienceHeroProps>((props, ref) => {
   // props
-  const {
-    hudProps,
-    introProps,
-    reticleVariant = 'dial',
-    readouts,
-    children,
-    className,
-    ...rest
-  } = props
+  const { hudProps, introProps, reticle = 'dial', readouts, children, className, ...rest } = props
 
   // jsx
   return (
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
-      {reticleVariant === 'dial' ? (
+      {reticle === 'dial' ? (
         <ReticleDial className={cn(styles.reticle())} readouts={readouts} />
       ) : (
-        <Reticle className={cn(styles.reticle())} />
+        <ReticleLogo className={cn(styles.reticle())} />
       )}
       <Hud {...hudProps} />
       <Intro className={cn(styles.intro())} {...introProps}>

src/components/organisms/home-hero.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Intro, type IntroProps } from '@/components/atoms/intro'
-import { Reticle } from '@/components/atoms/reticle'
 import { ReticleDial, type ReticleDialReadout } from '@/components/atoms/reticle-dial'
+import { ReticleLogo } from '@/components/atoms/reticle-logo'
 import { cn, cva, type VariantProps } from '@/utils/theme'
 
 const styles = {
@@ -17,30 +17,22 @@ type HomeHeroProps = HTMLAttributes<HomeHeroRef> &
     hudProps: HudProps
     introProps: IntroProps
     /** Which reticle atom to render. Defaults to the tick-dial variant. */
-    reticleVariant?: 'dial' | 'branded'
+    reticle?: 'dial' | 'logo'
     /** Boxed readouts on the reticle's side rails, dial variant only. Real data only. */
     readouts?: ReticleDialReadout[]
   }
 
 const HomeHero = forwardRef<HomeHeroRef, HomeHeroProps>((props, ref) => {
   // props
-  const {
-    hudProps,
-    introProps,
-    reticleVariant = 'dial',
-    readouts,
-    children,
-    className,
-    ...rest
-  } = props
+  const { hudProps, introProps, reticle = 'dial', readouts, children, className, ...rest } = props
 
   // jsx
   return (
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
-      {reticleVariant === 'dial' ? (
+      {reticle === 'dial' ? (
         <ReticleDial className={cn(styles.reticle())} readouts={readouts} />
       ) : (
-        <Reticle className={cn(styles.reticle())} />
+        <ReticleLogo className={cn(styles.reticle())} />
       )}
       <Hud {...hudProps} />
       <Intro className={cn(styles.intro())} {...introProps}>

src/components/organisms/project-hero.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, type HTMLAttributes } from 'react'
-import { Asset } from '@/components/atoms/asset'
 import { Hud, type HudProps } from '@/components/atoms/hud'
 import { Dossier, type DossierProps } from '@/components/molecules/dossier'
 import { Tile } from '@/components/molecules/tile'
@@ -10,8 +9,7 @@ const styles = {
   root: cva(['size-full', 'flex flex-col']),
   stage: cva(['relative grow', 'flex items-center justify-center', 'min-h-0']),
   hud: cva('absolute inset-0'),
-  tile: cva('aspect-video w-full'),
-  logo: cva('absolute inset-0 m-auto h-auto w-1/6 object-contain')
+  tile: cva('aspect-video w-full')
 }
 
 type ProjectHeroRef = HTMLDivElement
@@ -32,8 +30,7 @@ const ProjectHero = forwardRef<ProjectHeroRef, ProjectHeroProps>((props, ref) =>
     <div ref={ref} className={cn(styles.root({ className }))} {...rest}>
       <div className={cn(styles.stage())}>
         <Hud className={cn(styles.hud())} {...hudProps} />
-        <Tile className={cn(styles.tile())} asset={asset} />
-        {!!logo && <Asset className={cn(styles.logo())} asset={logo} />}
+        <Tile className={cn(styles.tile())} asset={asset} logo={logo} />
       </div>
       <Dossier {...dossierProps} />
     </div>