Fix Blobbi ground contact by compensating for SVG padding

The SVG viewBox has empty space at the bottom (~12% padding).
This was causing Blobbi to appear floating above the ground.

Fix:
- Changed inner container to use 'items-end' for bottom alignment
- Added negative marginBottom (-10% of size) to pull Blobbi down
- This compensates for the SVG's internal bottom padding

Shadow restored:
- Back to bottom: -4 (was 0)
- Size: 60% width, 12% height
- Blur: 2px
- Better visual separation from Blobbi

Result: Blobbi now visually sits on the ground with proper
shadow placement underneath.
This commit is contained in:
filemon
2026-03-23 22:20:16 -03:00
parent b314b98dd6
commit 2cc7c7bcaf
@@ -125,29 +125,36 @@ export function BlobbiCompanionVisual({
className={cn('relative', className)}
style={{ width: size, height: size }}
>
{/* Shadow underneath - soft ellipse anchored at ground level */}
{/* Shadow underneath - soft ellipse */}
<div
className="absolute pointer-events-none"
style={{
bottom: 0,
bottom: -4,
left: '50%',
width: size * 0.55,
height: size * 0.1,
width: size * 0.6,
height: size * 0.12,
transform: `translateX(-50%) scaleX(${shadowScale})`,
background: `radial-gradient(ellipse at center, rgba(0,0,0,${shadowOpacity}) 0%, rgba(0,0,0,${shadowOpacity * 0.4}) 50%, transparent 75%)`,
background: `radial-gradient(ellipse at center, rgba(0,0,0,${shadowOpacity}) 0%, rgba(0,0,0,${shadowOpacity * 0.5}) 40%, transparent 70%)`,
borderRadius: '50%',
filter: 'blur(1px)',
filter: 'blur(2px)',
transition: isDragging ? 'none' : 'transform 0.1s ease-out',
}}
/>
{/* Blobbi visual with floating transform */}
{/*
The SVG has empty space at the bottom (~12% of viewBox).
We use items-end to align Blobbi to the bottom of the container,
and add a small negative margin to pull it down to ground level.
*/}
<div
className="size-full"
className="size-full flex items-end justify-center"
style={{
transform: blobbiTransform,
transformOrigin: 'center bottom',
transition: isDragging ? 'none' : 'transform 0.05s ease-out',
// Pull Blobbi down to compensate for SVG bottom padding (~10% of size)
marginBottom: -size * 0.10,
}}
>
{companion.stage === 'baby' && (