Feel-better polish + hatch tuner + bird crown + Path Finder cards (#60)

* refactor(polish): feel-better pass across History / Profile / Path Finder, plus bird palette + legend icons + rail borders

Apply the 16 principles of the make-interfaces-feel-better skill across
the three sheets and their shared chrome. Token-first cascade so
follow-on surfaces inherit.

- styles.css `@theme`: new shadow tokens (--shadow-sheet-popover /
  -dialog / -tile / -active-rail), --press-scale token, .image-outline
  utility, global :where(h1-h4) text-balance + :where(p,li) text-pretty,
  rename @Keyframes trajectoryMenuIn → sheet-popover-in
- ui/sheet.tsx, ui/drawer.tsx: PageCloseButton + Drawer close size-9/8
  → size-10 hit area + press-scale; transition-[transform,opacity]
  collapse (principle #14); SheetNavButton gets press-scale 0.97
- ui/button.tsx: JSDoc note on `sm` variant hit area
- HistorySheet + CalendarPane + DayDetailCard: ViewModeDropdown press
  + popover shadow token + enter animation; chevron/today/term/retry
  buttons bumped to min-h-10 / size-10 with press-scale
- ProfileSheet: avatar + claim thumbnails get .image-outline; AccountMenu
  + ShareDialog + Tldr/Personality hero get shadow tokens + popover
  enter animation; ShareDialog buttons bumped to min-h-10 + press-scale;
  toggle pseudo hit-area extender; press-scale on TimelineQuote +
  BigFiveCards + Tldr chips; drop unused Button import
- TrajectorySheet: rename keyframe callsites to sheet-popover-in; nudge
  pathway-tabs outer radius to rounded-[18px] (exact concentric)
- ChoicesPageView: tabular-nums on counts; press-scale + before:-inset
  pseudo-extender on pattern + force chips

Bird:
- Kira.js: bring Masked Bower into the palette system. Adds
  palette.body + palette.tie to the masked species spec; refactors the
  GLB recolor block to read from the palette. setSpecies() now routes
  ALL species ids through the MaskedBower GLB, tinted from the chosen
  species's palette (back/accent → body/tie), so picking any egg color
  hatches the same GLB shape in the matching colorway. Re-applies tints
  in _buildMaskedAsync's resolve handler since the GLB scene is
  module-cached.

Calendar legend: replace dot/square markers with lucide icons
(Smile / NotebookPen / Camera / CalendarDays).

SideRail buttons: subtle dark borders for hover (black/8) + active
(black/10) — the prior white-on-cream borders were invisible. Active
state now uses --shadow-active-rail token; tooltip pill uses
--shadow-sheet-popover + faint border + specific transition list.

`pnpm check` clean. `pnpm test` shows only pre-existing failures
identical to main.

* feat(hatch): visual tuner + bird crown restore + calendar cell icons + Path Finder cards

Bird (Kira.js): keep V_Crest* crown visible across all colorways
(removed PR #55's MB_Crest hide block + dropped PR #57's mohawk
tuft + cap-sleeve calls); reparent MB_Crest meshes under MB_Head
via Object3D.attach() so the crown follows head tilt + wave; add
MB_HeadOrange to the palette tint map so the head matches the
body color.

Hatch tuner: new src/lib/student-space/hatch-tuner.ts store
mirroring camera-tuner pattern (DEFAULT_HATCH_PRESET +
patch/reset/useHatchPreset). EggHatcher reads bird Y positions,
scale, camera FOV + distance from the store at scene init; new
HATCH_TUNER_REPLAY_EVENT bumps a replayKey so the canvas remounts
with fresh values. New HatchTuneHud component with sliders +
embedded EggCanvas preview + Replay/Copy/Reset, gated to dev via
the Cmd+K palette and mounted globally in __root.tsx. Tuned
defaults: birdStartY -0.7, birdRevealY -0.4, birdScale 0.39,
cameraFov 28, cameraDistance 6.4.

EggCanvas polish: container h-48 w-40 → h-80 w-56, shell halves
transition transparent and fade out during the WAVE phase so the
bird stands alone before the next screen, name-step input
restyled to match the swatch-card hover/focus treatment
(max-w-[18rem], --shadow-sheet-tile default + lift to
--shadow-sheet-popover on hover/focus). buildBird routes ALL
egg colors through the GLB clone tinted from the species palette
(procedural builder archived in place as defensive fallback).

CalendarPane: cell markers swapped from colored dots / squares /
glyph-dot to Smile / Camera|NotebookPen / CalendarDays icons
matching the legend; per-mood color preserved via inline style;
photo precedence over reflection preserved; selected-cell
inversion preserved.

TrajectorySheet (Path Finder): SearchingBody pathway tabs
converted from a single tablist + tabpanel into a stacked
<ol> of self-contained cards (number badge + title + prompt +
EvidenceDisclosure + MSF link inside each card); hover lift via
--shadow-sheet-tile → --shadow-sheet-popover; selection state
(activeIndex / selectedIndex) removed.

Misc: firstChatActions.feel copy "Tell me how I feel now" →
"Capture my how i feel now"; KiraSpeciesPalette type extended
with optional body+tie GLB tints.

`pnpm check` clean. `pnpm test` shows only pre-existing failures
identical to main (same 10 failures, +17 new tests from rebased
PRs all passing).

---------

Co-authored-by: Reza Ilmi <reza.ilmi@gt.tech.gov.sg>

Author: rezailmi

docs/plans/2026-05-23-001-refactor-feel-better-history-profile-pathfinder-plan.md

@@ -298,7 +298,7 @@ function PatternTagPicker({
             aria-pressed={active}
             data-testid={`choices-decision-tag-${entry.id}-${tag}`}
             className={cn(
-              'rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors',
+              'relative cursor-pointer rounded-full border px-2.5 py-0.5 text-xs font-medium transition-[background-color,color,border-color,transform] before:absolute before:-inset-2 before:content-[""] active:scale-[0.96] disabled:pointer-events-none',
               active
                 ? 'border-[#2b2620] bg-[#2b2620] text-white'
                 : 'border-[#e3d8c4] bg-white/70 text-[#2b2620]/65 hover:text-[#2b2620]',
@@ -415,7 +415,7 @@ function DecisionForm({
                 aria-pressed={active}
                 data-testid={`choices-decision-form-force-${f}`}
                 className={cn(
-                  'rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                  'relative cursor-pointer rounded-full border px-3 py-1 text-xs font-medium transition-[background-color,color,border-color,transform] before:absolute before:-inset-2 before:content-[""] active:scale-[0.96]',
                   active
                     ? cn('font-medium', theme.callout, theme.border)
                     : 'border-[#e3d8c4] bg-white text-[#2b2620]/65 hover:text-[#2b2620]',
@@ -514,7 +514,7 @@ function SectionPatterns({
                   {PATTERN_TAG_LABEL[tag]}
                 </p>
                 <p className="text-xs text-[#2b2620]/65">{PATTERN_TAG_DESCRIPTION[tag]}</p>
-                <p className="mt-2 text-2xl font-semibold">
+                <p className="mt-2 text-2xl font-semibold tabular-nums">
                   {count}
                   <span className="ml-1 text-xs font-normal text-[#2b2620]/55">
                     {count === 1 ? 'decision' : 'decisions'}

src/components/ChoicesPageView.tsx

@@ -2,6 +2,7 @@ import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'
 import { useNavigate, useRouterState } from '@tanstack/react-router'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { CAMERA_TUNER_OPEN_EVENT } from '~/components/student-space/onboarding/CameraTuneHud'
+import { HATCH_TUNER_OPEN_EVENT } from '~/components/student-space/onboarding/HatchTuneHud'
 import { Dialog, DialogOverlay, DialogPortal } from '~/components/ui/dialog'
 import { clearStudentSpaceLocalState } from '~/lib/clear-student-space-local-state'
 import { signOutEngine } from '~/lib/sign-out-engine'
@@ -68,6 +69,17 @@ export function DevPalette() {
             },
           }
         : null
+    const hatchTuner: Command | null = import.meta.env.DEV
+      ? {
+          id: 'hatch-tuner',
+          label: 'Show hatch tuner',
+          hint: 'live preview',
+          run: () => {
+            setOpen(false)
+            window.dispatchEvent(new Event(HATCH_TUNER_OPEN_EVENT))
+          },
+        }
+      : null
     return [
       { id: 'ui', label: 'Switch to UI mode', hint: '/', run: go('/') },
       {
@@ -86,6 +98,7 @@ export function DevPalette() {
         },
       },
       ...(cameraTuner ? [cameraTuner] : []),
+      ...(hatchTuner ? [hatchTuner] : []),
       {
         id: 'restart-onboarding',
         label: 'Restart onboarding',

src/components/DevPalette.tsx

@@ -167,15 +167,15 @@ function RailButton({
       className={cn(
         'group relative grid size-11 cursor-pointer place-items-center rounded-xl border border-transparent transition-[transform,background-color,border-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out) active:scale-[0.96] motion-reduce:active:scale-100',
         'bg-transparent text-(--color-sheet-ink-soft) shadow-none',
-        'hover:border-white/70 hover:bg-white/70 hover:text-(--color-sheet-ink)',
-        'data-[active]:border-white data-[active]:bg-white data-[active]:text-(--color-sheet-ink) data-[active]:shadow-lg data-[active]:shadow-black/12',
+        'hover:border-black/[0.08] hover:bg-white/70 hover:text-(--color-sheet-ink)',
+        'data-[active]:border-black/[0.10] data-[active]:bg-white data-[active]:text-(--color-sheet-ink) data-[active]:shadow-[var(--shadow-active-rail)]',
         compact && 'text-(--color-sheet-ink-faint)',
       )}
     >
       <Icon aria-hidden className="size-5" />
       <span
         className={cn(
-          'pointer-events-none absolute left-[calc(100%+8px)] top-1/2 z-10 -translate-y-1/2 translate-x-1 rounded-full px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap opacity-0 shadow-lg shadow-black/12 transition-[opacity,transform] duration-(--duration-fast) ease-(--ease-out) motion-reduce:transition-none group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:translate-x-0 group-focus-visible:opacity-100 max-[640px]:hidden',
+          'pointer-events-none absolute left-[calc(100%+8px)] top-1/2 z-10 -translate-y-1/2 translate-x-1 rounded-full border border-black/[0.06] px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap opacity-0 shadow-(--shadow-sheet-popover) transition-[opacity,transform] duration-(--duration-fast) ease-(--ease-out) motion-reduce:transition-none group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:translate-x-0 group-focus-visible:opacity-100 max-[640px]:hidden',
           'bg-white text-(--color-sheet-ink)',
         )}
       >

src/components/student-space/navigation/SideRail.tsx

@@ -20,6 +20,7 @@ import {
   EGG_COLORS,
   ONBOARDING_COPY,
 } from '~/engine/student-space/Game/View/Onboarding/copy.js'
+import { getHatchPreset } from '~/lib/student-space/hatch-tuner'
 import { cn } from '~/lib/utils'
 
 /**
@@ -55,6 +56,11 @@ type KiraLike = {
   setSpecies?: (id: string) => unknown
 }
 
+/** Event fired by the hatch-tuner HUD to remount the EggCanvas so
+ * fresh tuner values take effect. Bumping a state key on receipt
+ * forces React to unmount + recreate the Three.js scene. */
+export const HATCH_TUNER_REPLAY_EVENT = 'student-space:replay-hatch-canvas'
+
 export function EggHatcher({
   stage,
   reducedMotion,
@@ -74,6 +80,13 @@ export function EggHatcher({
   const [selectedColor, setSelectedColor] = useState<string>(initialColor)
   const [name, setName] = useState(onboarding?.companionName ?? '')
   const [visible, setVisible] = useState(reducedMotion)
+  const [replayKey, setReplayKey] = useState(0)
+
+  useEffect(() => {
+    const onReplay = () => setReplayKey((k) => k + 1)
+    window.addEventListener(HATCH_TUNER_REPLAY_EVENT, onReplay)
+    return () => window.removeEventListener(HATCH_TUNER_REPLAY_EVENT, onReplay)
+  }, [])
 
   const selected = EGG_COLOR_BY_ID[selectedColor] ?? EGG_COLORS[0]
   const trimmedName = name.trim()
@@ -121,6 +134,7 @@ export function EggHatcher({
       {stage === 'egg-color' ? (
         <section className="flex w-full max-w-[420px] flex-col items-center gap-5 text-center">
           <EggCanvas
+            key={`egg-color-${replayKey}`}
             color={hatchColor}
             reducedMotion={reducedMotion}
             speciesId={selectedColor}
@@ -147,16 +161,17 @@ export function EggHatcher({
                 aria-label={ONBOARDING_COPY.eggColor.swatchAria.replace('{colorName}', color.name)}
                 data-testid={`egg-color-${color.id}`}
                 className={cn(
-                  'flex min-h-16 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-transparent bg-white/70',
-                  'text-xs font-semibold text-(--color-onb-ink) shadow-[0_8px_20px_rgba(15,18,36,0.10)]',
-                  'transition-[transform,border-color,background] duration-150 hover:-translate-y-px hover:bg-white',
+                  'flex min-h-16 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-transparent bg-white/70 py-5',
+                  'text-xs font-semibold text-(--color-onb-ink) shadow-(--shadow-sheet-tile)',
+                  'transition-[transform,border-color,background-color,box-shadow] duration-200 ease-(--ease-sheet)',
+                  'hover:-translate-y-0.5 hover:bg-white hover:shadow-(--shadow-sheet-popover) active:scale-[0.96]',
                   'focus-visible:outline-[3px] focus-visible:outline-[rgba(255,138,92,0.7)] focus-visible:outline-offset-[3px]',
-                  'data-[checked]:border-(--color-onb-accent) data-[checked]:bg-white',
+                  'data-[checked]:-translate-y-0.5 data-[checked]:border-(--color-onb-accent) data-[checked]:bg-white data-[checked]:shadow-(--shadow-sheet-popover)',
                 )}
               >
                 <span
                   aria-hidden="true"
-                  className="size-7 rounded-full shadow-inner"
+                  className="image-outline size-8 rounded-full shadow-inner"
                   style={{ background: color.hex }}
                 />
                 {color.name}
@@ -178,6 +193,7 @@ export function EggHatcher({
       {stage === 'egg-name' ? (
         <section className="flex w-full max-w-[420px] flex-col items-center gap-5 text-center">
           <EggCanvas
+            key={`egg-name-${replayKey}`}
             color={hatchColor}
             reducedMotion={reducedMotion}
             speciesId={selectedColor}
@@ -204,7 +220,12 @@ export function EggHatcher({
                 commitName()
               }
             }}
-            className="min-h-12 w-full rounded-2xl border border-[rgba(43,38,32,0.12)] bg-white/80 px-4 text-center text-base font-semibold text-(--color-onb-ink) shadow-[0_8px_20px_rgba(15,18,36,0.10)] outline-none focus:border-(--color-onb-accent)"
+            className={cn(
+              'min-h-12 w-full max-w-[18rem] rounded-2xl border-2 border-transparent bg-white/70 px-4 text-center text-base font-semibold text-(--color-onb-ink) shadow-(--shadow-sheet-tile)',
+              'transition-[transform,border-color,background-color,box-shadow] duration-200 ease-(--ease-sheet) outline-none',
+              'hover:-translate-y-0.5 hover:bg-white hover:shadow-(--shadow-sheet-popover)',
+              'focus:-translate-y-0.5 focus:border-(--color-onb-accent) focus:bg-white focus:shadow-(--shadow-sheet-popover)',
+            )}
           />
           <div className="flex flex-wrap justify-center gap-3">
             <Button
@@ -234,6 +255,7 @@ export function EggHatcher({
           aria-live="polite"
         >
           <EggCanvas
+            key={`egg-hatch-${replayKey}`}
             color={hatchColor}
             reducedMotion={reducedMotion}
             speciesId={selectedColor}
@@ -267,8 +289,10 @@ export function EggHatcher({
 // boots (pre-reveal, scale 0). `BIRD_REVEAL_Y` is where it lands after the
 // reveal ramp; the wave bob adds ±0.025 on top.
 const BIRD_REVEAL_SCALE = 1.0
-const BIRD_START_Y = -0.8
-const BIRD_REVEAL_Y = -0.65
+// Bird Y positions + scale + camera framing all sourced from
+// `hatch-tuner.ts` (live-tunable via the Cmd+K dev HUD). Values are
+// read at scene init time — the dev HUD fires a replay event that
+// remounts the canvas so changes take effect.
 
 const HATCH_TIMELINE = {
   WIGGLE_END: 450,
@@ -285,7 +309,7 @@ const HATCH_TIMELINE = {
   WAVE_END: 2400,
 } as const
 
-function EggCanvas({
+export function EggCanvas({
   color,
   reducedMotion,
   speciesId,
@@ -337,8 +361,14 @@ function EggCanvas({
 
       const scene = new THREE.Scene()
 
-      const camera = new THREE.PerspectiveCamera(28, 160 / 200, 0.1, 100)
-      camera.position.set(0, 0, 5.0)
+      // Snapshot tuner values at scene init. The HatchTuneHud's "Replay"
+      // remounts this component so changes take effect on the next frame.
+      const tuner = getHatchPreset()
+      const BIRD_START_Y = tuner.birdStartY
+      const BIRD_REVEAL_Y = tuner.birdRevealY
+
+      const camera = new THREE.PerspectiveCamera(tuner.cameraFov, 160 / 200, 0.1, 100)
+      camera.position.set(0, 0, tuner.cameraDistance)
       camera.lookAt(0, 0, 0)
 
       scene.add(new THREE.AmbientLight(0xffffff, 0.34))
@@ -361,6 +391,10 @@ function EggCanvas({
         emissive: 0x000000,
         emissiveIntensity: 1,
         flatShading: true,
+        // Transparent so the shell halves can fade out during the wave
+        // phase (see HATCH_TIMELINE; the intact `mesh` is invisible by
+        // then so its opacity is irrelevant).
+        transparent: true,
       })
       const mesh = new THREE.Mesh(geo, mat)
       mesh.rotation.set(0.18, 0.45, 0)
@@ -451,49 +485,72 @@ function EggCanvas({
       }
       const buildBird = (id: string) => {
         const token = ++buildToken
-        if (id === 'masked') {
-          // Async path: clone the cached GLB scene so the hatchling is
-          // visually the same bird that flies in one screen later
-          // (orange body, red tie, tuft hair). SkeletonUtils.clone
-          // gives the clone its own skeleton, so animating the world
-          // Kira's bones doesn't twitch the egg bird.
-          void (async () => {
-            try {
-              const [{ scene: source }, SkeletonUtils] = await Promise.all([
-                loadMaskedScene(),
-                import('three/examples/jsm/utils/SkeletonUtils.js'),
-              ])
-              if (token !== buildToken || cancelled) return
-              const clone = SkeletonUtils.clone(source) as THREEType.Object3D
-              // The cached source scene is already scaled to MASKED_SCALE
-              // (0.30); the clone inherits that. For the egg preview we
-              // size up so the bird reads at roughly the procedural bird's
-              // footprint inside the shell.
-              clone.scale.setScalar(0.55)
-              // Re-find the head in the cloned tree (SkeletonUtils.clone
-              // creates new node instances). MB_Head is the visible head
-              // mesh, sibling to the armature inside MB_Rig.
-              let cloneHead: THREEType.Object3D | null = null
-              clone.traverse((o) => {
-                if (!cloneHead && /MB_Head/i.test(o.name)) cloneHead = o
-              })
-              birdParts = { root: clone, head: cloneHead ?? clone, kind: 'glb-clone' }
-              birdGroup.add(clone)
-            } catch (err) {
-              if (token !== buildToken || cancelled) return
-              console.warn('[EggCanvas] masked GLB clone failed, falling back to procedural', err)
-              const spec = SPECIES_BY_ID.masked ?? SPECIES_BY_ID.flame
-              const parts = buildStandingBird(spec)
-              birdParts = { root: parts.root, head: parts.head, kind: 'procedural' }
-              birdGroup.add(parts.root)
+        // All species hatch as the MaskedBower GLB, tinted from the
+        // chosen species's palette — same routing as Kira.setSpecies in
+        // the world canvas, so the egg preview matches the post-hatch
+        // bird across every egg-color pick. The procedural builder
+        // (buildStandingBird) is archived in place: still imported, but
+        // only called as a defensive fallback if the GLB load fails.
+        // SkeletonUtils.clone gives the clone its own skeleton, so
+        // animating the world Kira's bones doesn't twitch the egg bird.
+        void (async () => {
+          try {
+            const [{ scene: source }, SkeletonUtils] = await Promise.all([
+              loadMaskedScene(),
+              import('three/examples/jsm/utils/SkeletonUtils.js'),
+            ])
+            if (token !== buildToken || cancelled) return
+            const clone = SkeletonUtils.clone(source) as THREEType.Object3D
+            // Scale comes from the hatch tuner. Default 0.38 — the
+            // source GLB ships at MASKED_SCALE 0.30; the dev HUD can
+            // dial this between ~0.2 and ~0.8 to fit the canvas.
+            clone.scale.setScalar(tuner.birdScale)
+            // Tint cloned materials per the picked species's palette.
+            // Body + head share the same tint; tie uses the accent.
+            // NOTE: SkeletonUtils.clone shares materials by reference,
+            // so this mutates the cached scene's materials too. That's
+            // fine — the world Kira re-applies its own tints on the
+            // same materials when setSpecies runs after onboarding.
+            const spec = SPECIES_BY_ID[id] ?? SPECIES_BY_ID.masked
+            const bodyTint = spec?.palette?.body || spec?.palette?.back
+            const tieTint = spec?.palette?.tie || spec?.palette?.accent
+            const tints: Record<string, string | undefined> = {
+              MB_BodyYellow: bodyTint,
+              MB_HeadOrange: bodyTint,
+              Uniform_TieStriped: tieTint,
             }
-          })()
-          return
-        }
-        const spec = SPECIES_BY_ID[id] ?? SPECIES_BY_ID.flame
-        const parts = buildStandingBird(spec)
-        birdParts = { root: parts.root, head: parts.head, kind: 'procedural' }
-        birdGroup.add(parts.root)
+            clone.traverse((o) => {
+              const mesh = o as THREEType.Mesh
+              if (!mesh.isMesh) return
+              const mats = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
+              for (const mat of mats) {
+                if (!mat) continue
+                const m = mat as THREEType.MeshStandardMaterial
+                const hex = tints[m.name]
+                if (hex) {
+                  m.color?.set(hex)
+                  m.needsUpdate = true
+                }
+              }
+            })
+            // Re-find the head in the cloned tree (SkeletonUtils.clone
+            // creates new node instances). MB_Head is the visible head
+            // mesh, sibling to the armature inside MB_Rig.
+            let cloneHead: THREEType.Object3D | null = null
+            clone.traverse((o) => {
+              if (!cloneHead && /MB_Head/i.test(o.name)) cloneHead = o
+            })
+            birdParts = { root: clone, head: cloneHead ?? clone, kind: 'glb-clone' }
+            birdGroup.add(clone)
+          } catch (err) {
+            if (token !== buildToken || cancelled) return
+            console.warn('[EggCanvas] masked GLB clone failed, falling back to procedural', err)
+            const spec = SPECIES_BY_ID[id] ?? SPECIES_BY_ID.masked ?? SPECIES_BY_ID.flame
+            const parts = buildStandingBird(spec)
+            birdParts = { root: parts.root, head: parts.head, kind: 'procedural' }
+            birdGroup.add(parts.root)
+          }
+        })()
       }
       buildBird(speciesRef.current)
 
@@ -679,6 +736,13 @@ function EggCanvas({
               )
               birdParts.head.rotation.z = Math.sin(waveU * Math.PI) * 0.2
               birdGroup.position.y = BIRD_REVEAL_Y + Math.sin(waveU * Math.PI) * 0.025
+              // Fade both shell halves out during the wave so the bird is
+              // standing alone when the screen transitions to first-chat.
+              mat.opacity = 1 - easeOutCubic(waveU)
+              if (waveU >= 1) {
+                topShell.visible = false
+                bottomShell.visible = false
+              }
             }
           }
         }
@@ -748,7 +812,7 @@ function EggCanvas({
   }, [])
 
   return (
-    <div className="relative grid h-48 w-40 place-items-center" aria-hidden="true">
+    <div className="relative grid h-80 w-56 place-items-center" aria-hidden="true">
       <div className="absolute bottom-3 h-4 w-24 rounded-full bg-[rgba(43,38,32,0.10)] blur-sm" />
       <canvas ref={canvasRef} className="relative h-full w-full" />
     </div>