mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

IMPROVED - Remove dock shadows, fix bounce artifact, mac-radius icons, gallery icon

Browse Source 
- 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
2026-09-20 20:48:23 +02:00
parent c41a2e38c9
commit 57423b1baf
6 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/floating-controls.tsx
+1 -1
View File
@@ -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;
components/layout/site-dock.tsx
+15 -15
View File
@@ -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}