IMPROVED - Remove dock shadows, fix bounce artifact, mac-radius icons, gallery icon
- Drop all shadows (dock, icons, tooltip, corner pills); this also removes the square that showed behind an icon mid-bounce. - Bounce now moves the whole tile (logo bg lives on the animated element), so nothing is left behind. - Icons use a ~22% macOS-like corner radius (art carries its own shape). - Portfolio gets an original photo/gallery icon (not Apple's system icon).
This commit is contained in:
moh
@@ -19,7 +19,7 @@ type FloatingControlsProps = {
|
||||
};
|
||||
|
||||
const pill =
|
||||
"flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
||||
"flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
||||
|
||||
/** Radius (px) of the arc the items fan out along. */
|
||||
const RADIUS = 92;
|
||||
|
||||
@@ -81,16 +81,19 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
iconSize={50}
|
||||
iconMagnification={92}
|
||||
iconDistance={150}
|
||||
className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70 shadow-panel"
|
||||
className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70"
|
||||
>
|
||||
{/* ── Logo (fixed src → no refresh flash) ── */}
|
||||
<DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
|
||||
<DockIcon className="group relative overflow-visible">
|
||||
<Link
|
||||
href={homeHref}
|
||||
aria-label="mohfarawati — Home"
|
||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||
className="flex h-full w-full items-center justify-center"
|
||||
>
|
||||
<motion.span className="flex h-full w-full items-center justify-center rounded-[inherit]" {...bounceProps("logo")}>
|
||||
<motion.span
|
||||
className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%] bg-white ring-1 ring-black/10"
|
||||
{...bounceProps("logo")}
|
||||
>
|
||||
<Image
|
||||
src="/logos/light-primary.svg"
|
||||
alt="mohfarawati"
|
||||
@@ -98,7 +101,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
height={104}
|
||||
sizes="104px"
|
||||
priority
|
||||
className="h-full w-full rounded-[inherit] object-contain"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</motion.span>
|
||||
</Link>
|
||||
@@ -107,7 +110,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
|
||||
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
|
||||
|
||||
{/* ── Pages ── */}
|
||||
{/* ── Pages (icon art carries its own squircle shape) ── */}
|
||||
{navItems.map(({ key, path, icon: iconSrc, disabled }) => {
|
||||
const itemPath = path || "/";
|
||||
const isActive = isNavItemActive(currentPath, itemPath);
|
||||
@@ -115,7 +118,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
|
||||
const icon = (
|
||||
<motion.span
|
||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||
className="flex h-full w-full items-center justify-center"
|
||||
{...(disabled ? {} : bounceProps(key))}
|
||||
>
|
||||
<Image
|
||||
@@ -124,20 +127,17 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
width={104}
|
||||
height={104}
|
||||
sizes="104px"
|
||||
className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
|
||||
className={cn("h-full w-full object-contain", disabled && "opacity-55")}
|
||||
/>
|
||||
</motion.span>
|
||||
);
|
||||
|
||||
return (
|
||||
<DockIcon
|
||||
key={key}
|
||||
className="group relative overflow-visible rounded-[26%] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)]"
|
||||
>
|
||||
<DockIcon key={key} className="group relative overflow-visible">
|
||||
{disabled ? (
|
||||
<span
|
||||
aria-disabled="true"
|
||||
className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
|
||||
className="flex h-full w-full cursor-not-allowed items-center justify-center"
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
@@ -146,7 +146,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
href={getLocalizedPath(locale, itemPath, defaultLocale)}
|
||||
aria-label={label}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||
className="flex h-full w-full items-center justify-center"
|
||||
>
|
||||
{icon}
|
||||
</Link>
|
||||
@@ -177,7 +177,7 @@ function DockTip({ label, soon }: { label: string; soon?: string }) {
|
||||
return (
|
||||
<span
|
||||
role="tooltip"
|
||||
className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
|
||||
className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
|
||||
>
|
||||
{label}
|
||||
{soon ? <span className="ms-1.5 text-xs tracking-wide text-primary">{soon}</span> : null}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 853 B After Width: | Height: | Size: 853 B |
@@ -4,9 +4,9 @@
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 865 B |
@@ -1,13 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#4aa8ff"/><stop offset="1" stop-color="#7b5cff"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.30"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<clipPath id="card"><rect x="27" y="31" width="46" height="38" rx="7"/></clipPath>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="#fff">
|
||||
<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
|
||||
<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<rect x="27" y="31" width="46" height="38" rx="7" fill="#ffffff"/>
|
||||
<g clip-path="url(#card)">
|
||||
<circle cx="40" cy="44" r="5.5" fill="#ffc23d"/>
|
||||
<path d="M27 69 L43 52 L53 61 L61 51 L73 69 Z" fill="#37b877"/>
|
||||
<path d="M55 69 L66 57 L73 64 L73 69 Z" fill="#2c9c86"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 909 B After Width: | Height: | Size: 1.0 KiB |
@@ -4,9 +4,9 @@
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 894 B After Width: | Height: | Size: 894 B |
Reference in New Issue
Block a user