chore(website): improve showcase ux

guilhermerodz · Jan 7, 2025 · fcf30b7 · fcf30b7
1 parent 09259fd
commit fcf30b7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 21 deletions.
diff --git a/apps/website/src/app/(local-pages)/example-playground/code.tsx b/apps/website/src/app/(local-pages)/example-playground/code.tsx
@@ -98,16 +98,16 @@ ${tsx}
 
 export function ExampleCode() {
   return (
-    <div className="relative code-example w-full overflow-hidden lg:opacity-0 lg:animate-fade-in [animation-delay:5000ms] animate-none">
+    <div className="relative code-example w-full overflow-hidden lg:opacity-0 lg:animate-fade-up !duration-1000 ![animation-delay:3000ms] animate-none">
       <div className="w-full">
         <Code dark={false} code={code} toCopy={tsx} />
         <Code dark={true} code={code} toCopy={tsx} />
       </div>
 
-      <div className="hidden lg:[display:unset] absolute inset-x-0 top-0 -bottom-full code-example-overlay pointer-events-none z-20 [animation-delay:5000ms]"></div>
+      <div className="hidden lg:[display:unset] absolute inset-x-0 top-0 -bottom-full pointer-events-none z-20 [animation-delay:5000ms]"></div>
 
       {/* Anchor */}
-      <div className="code-example-anchor absolute pointer-events-none w-px h-px -top-[5.5rem]" />
+      <div id="code-example-anchor" className="absolute pointer-events-none w-px h-px -top-[5.5rem]" />
     </div>
   )
 }
diff --git a/apps/website/src/app/(pages)/(home)/_components/confetti.tsx b/apps/website/src/app/(pages)/(home)/_components/confetti.tsx
@@ -1,10 +1,27 @@
 import VFX from 'react-canvas-confetti/dist/presets/explosion'
 
-export function Confetti() {
+export function Confetti({
+  pageCoords = { x: window.innerWidth / 2, y: window.innerHeight / 2 },
+}: {
+  pageCoords?: {
+    x: number
+    y: number
+  }
+}) {
   return (
     <VFX
       autorun={{ speed: 1 }}
       globalOptions={{ disableForReducedMotion: true }}
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        inset: 0,
+        zIndex: 1000,
+        left: pageCoords.x,
+        top: pageCoords.y,
+        transform: 'translate(-50%, -50%)',
+      }}
     />
   )
 }
diff --git a/apps/website/src/app/(pages)/(home)/_components/showcase.tsx b/apps/website/src/app/(pages)/(home)/_components/showcase.tsx
@@ -64,7 +64,7 @@ export function Showcase({ className, ...props }: { className?: string }) {
     }
 
     const anchor = document.querySelector<HTMLInputElement>(
-      '.code-example-anchor',
+      '#code-example-anchor',
     )
 
     window.scrollTo({
@@ -87,7 +87,10 @@ export function Showcase({ className, ...props }: { className?: string }) {
       )}
       {hasGuessed && (
         <div className="fixed inset-0 z-50 pointer-events-none motion-reduce:hidden">
-          <DynamicConfetti />
+          <DynamicConfetti pageCoords={{
+            x: inputRef.current!.getBoundingClientRect().left + (inputRef.current?.getBoundingClientRect().width || 0) * 0.9,
+            y: inputRef.current!.getBoundingClientRect().top + (inputRef.current?.getBoundingClientRect().height || 0) / 2
+          }} />
         </div>
       )}
 
@@ -152,7 +155,7 @@ function Slot(props: {
     <div
       className={cn(
         'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] md:text-[4rem] flex items-center justify-center border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all [transition-duration:300ms] outline outline-0 outline-accent-foreground/20',
-        'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
+        'group-hover:border-accent-foreground/20 group-focus-within:!border-accent-foreground/50',
         {
           'outline-4 outline-accent-foreground': props.isActive,
         },

diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
@@ -18,8 +18,19 @@ const config = {
       },
     },
     extend: {
-      transitionDelay: {
-        1500: '1500ms',
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+
+        'caret-blink': 'caret-blink 1.2s ease-out infinite',
+
+        'fade-in': 'fade-in 0.3s ease-out forwards',
+        'fade-up': 'fade-up 1s ease-out forwards',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -56,11 +67,6 @@ const config = {
           foreground: 'hsl(var(--card-foreground))',
         },
       },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
       keyframes: {
         'accordion-down': {
           from: { height: '0' },
@@ -94,14 +100,12 @@ const config = {
           to: { opacity: '1', transform: 'translateY(0)' },
         },
       },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-
-        'caret-blink': 'caret-blink 1.2s ease-out infinite',
-        'fade-in': 'fade-in 0.3s ease-out forwards',
-        'fade-up': 'fade-up 1s ease-out forwards',
+      transitionDelay: {
+        1500: '1500ms',
       },
+      transitionTimingFunction: {
+        'default': 'ease-out',
+      }
     },
   },
   plugins: [require('tailwindcss-animate')],