From 1d971dc5e1493bf76cf3cab22897a82ea6de7e95 Mon Sep 17 00:00:00 2001 From: nazca Date: Thu, 26 Mar 2026 23:50:11 +0900 Subject: [PATCH 1/2] feat: add smooth easing animations for tooltips - Updated globals.css to include tooltip easing animations with cubic-bezier timing functions. - Modified TooltipContent component to utilize new tooltip-ease-in and tooltip-ease-out classes for smoother transitions. Co-authored-by: Claude Opus 4.6 (1M context) --- .gitignore | 3 +++ src/app/globals.css | 9 +++++++++ src/components/ui/tooltip/index.tsx | 10 ++++++---- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index c32bc99e..ab70b7f5 100644 --- a/.gitignore +++ b/.gitignore @@ -69,3 +69,6 @@ node-compile-cache/ # package manager lock files # pnpm-lock.yaml + +# private skills (local only) +.claude/skills/motion-design-prompt/ diff --git a/src/app/globals.css b/src/app/globals.css index cdc0f275..63c5b9eb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -136,3 +136,12 @@ @utility accordion-up { animation: accordion-up 0.2s ease-out; } + +/* Tooltip用の滑らかなイージング */ +/* en: Smooth easing for tooltip animations */ +@utility tooltip-ease-in { + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); +} +@utility tooltip-ease-out { + animation-timing-function: cubic-bezier(0.4, 0, 1, 1); +} diff --git a/src/components/ui/tooltip/index.tsx b/src/components/ui/tooltip/index.tsx index 4d04eff6..8a605bcb 100644 --- a/src/components/ui/tooltip/index.tsx +++ b/src/components/ui/tooltip/index.tsx @@ -99,10 +99,12 @@ function TooltipContent({ side={side} sideOffset={sideOffset} className={cn( - "bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95", - "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", - "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", - "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-90 duration-250 tooltip-ease-in", + "data-[side=top]:slide-in-from-bottom-4 data-[side=bottom]:slide-in-from-top-4", + "data-[side=left]:slide-in-from-right-4 data-[side=right]:slide-in-from-left-4", + "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-90 data-[state=closed]:duration-200 data-[state=closed]:tooltip-ease-out", + "data-[state=closed]:data-[side=top]:slide-out-to-bottom-4 data-[state=closed]:data-[side=bottom]:slide-out-to-top-4", + "data-[state=closed]:data-[side=left]:slide-out-to-right-4 data-[state=closed]:data-[side=right]:slide-out-to-left-4", "z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice", "px-2 py-1 character-2-regular-pro text-white", className From b11a6c5f5bb0e6240f3d8c86bb41c4f35cd6befb Mon Sep 17 00:00:00 2001 From: nazcadon Date: Thu, 2 Apr 2026 09:34:15 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20tooltip=E3=82=A2=E3=83=8B=E3=83=A1?= =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E3=82=88=E3=82=8A?= =?UTF-8?q?=E6=BB=91=E3=82=89=E3=81=8B=E3=81=AB=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TooltipContentコンポーネントのアニメーションクラスを調整してトランジション効果を向上 - tooltipのインタラクションをよりスムーズにするためスライドイン・スライドアウトの時間を調整 Co-authored-by: Claude Opus 4.6 (1M context) --- src/components/ui/tooltip/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/ui/tooltip/index.tsx b/src/components/ui/tooltip/index.tsx index 8a605bcb..2c06bf60 100644 --- a/src/components/ui/tooltip/index.tsx +++ b/src/components/ui/tooltip/index.tsx @@ -100,11 +100,9 @@ function TooltipContent({ sideOffset={sideOffset} className={cn( "bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-90 duration-250 tooltip-ease-in", - "data-[side=top]:slide-in-from-bottom-4 data-[side=bottom]:slide-in-from-top-4", - "data-[side=left]:slide-in-from-right-4 data-[side=right]:slide-in-from-left-4", - "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-90 data-[state=closed]:duration-200 data-[state=closed]:tooltip-ease-out", - "data-[state=closed]:data-[side=top]:slide-out-to-bottom-4 data-[state=closed]:data-[side=bottom]:slide-out-to-top-4", - "data-[state=closed]:data-[side=left]:slide-out-to-right-4 data-[state=closed]:data-[side=right]:slide-out-to-left-4", + "data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1", + "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1", + "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-90 data-[state=closed]:duration-[120ms] data-[state=closed]:tooltip-ease-out", "z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice", "px-2 py-1 character-2-regular-pro text-white", className