✨ feat(apps/web/registry/special/example): add multiple demo componen…

…ts for UI elements This commit introduces a series of new React component demos within the special examples directory. These demos include various UI elements such as IconCloud, LetterPullup, LinearGradient, MagicCard, Marquee, Meteors, NeonGradientCard, NumberTicker, OrbitingCircles, Particles, RadialGradient, RetroGrid, Ripple, ScrollBasedVelocity, and SeparateAway. Each component is designed to showcase specific visual or interactive features, enhancing the library's offerings for developers looking to implement sophisticated UI components in their projects. The addition of these demos not only enriches the library but also provides practical examples that developers can reference or build upon for their applications.
nyxb-ui · Jun 18, 2024 · 4faedff · 4faedff
1 parent d0e8300
commit 4faedff
Show file tree

Hide file tree

Showing 20 changed files with 730 additions and 0 deletions.
diff --git a/apps/web/registry/special/example/icon-cloud-demo.tsx b/apps/web/registry/special/example/icon-cloud-demo.tsx
@@ -0,0 +1,42 @@
+import IconCloud from '~/registry/special/icon-cloud'
+
+const slugs = [
+   'typescript',
+   'javascript',
+   'dart',
+   'java',
+   'react',
+   'flutter',
+   'android',
+   'html5',
+   'css3',
+   'nodedotjs',
+   'express',
+   'nextdotjs',
+   'prisma',
+   'amazonaws',
+   'postgresql',
+   'firebase',
+   'nginx',
+   'vercel',
+   'testinglibrary',
+   'jest',
+   'cypress',
+   'docker',
+   'git',
+   'jira',
+   'github',
+   'gitlab',
+   'visualstudiocode',
+   'androidstudio',
+   'sonarqube',
+   'figma',
+]
+
+export default function IconCloudDemo() {
+   return (
+      <div className="relative flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border bg-background px-20 pb-20 pt-8 ">
+         <IconCloud iconSlugs={slugs} />
+      </div>
+   )
+}
diff --git a/apps/web/registry/special/example/letter-pullup-demo.tsx b/apps/web/registry/special/example/letter-pullup-demo.tsx
@@ -0,0 +1,5 @@
+import LetterPullup from '~/registry/special/letter-pullup'
+
+export default async function LetterPullupDemo() {
+   return <LetterPullup words="Staggered Letter Pull Up" delay={0.05} />
+}
diff --git a/apps/web/registry/special/example/linear-gradient-demo.tsx b/apps/web/registry/special/example/linear-gradient-demo.tsx
@@ -0,0 +1,12 @@
+import LinearGradient from '~/registry/special/linear-gradient'
+
+export default function LinearGradientDemo() {
+   return (
+      <div className="relative flex h-full w-full max-w-[32rem] items-center justify-center rounded-lg border bg-background p-20 md:shadow-xl">
+         <p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
+            Linear Gradient
+         </p>
+         <LinearGradient />
+      </div>
+   )
+}
diff --git a/apps/web/registry/special/example/magic-card-demo.tsx b/apps/web/registry/special/example/magic-card-demo.tsx
@@ -0,0 +1,31 @@
+import {
+   MagicCard,
+   MagicContainer,
+} from '~/registry/special/magic-card'
+
+export default function MagicCardDemo() {
+   return (
+      <MagicContainer
+         className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row"
+      >
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/special/example/magic-card-gradient.tsx b/apps/web/registry/special/example/magic-card-gradient.tsx
@@ -0,0 +1,34 @@
+import {
+   MagicCard,
+   MagicContainer,
+} from '~/registry/special/magic-card'
+
+export default function MagicCardGradient() {
+   return (
+      <MagicContainer
+         className="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row"
+      >
+         <MagicCard
+            borderWidth={3}
+            className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl"
+         >
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Magic
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Card
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+         <MagicCard className="flex w-full cursor-pointer flex-col items-center justify-center overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-20 shadow-2xl">
+            <p className="z-10 whitespace-nowrap text-4xl font-medium text-gray-800 dark:text-gray-200">
+               Demo
+            </p>
+            <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_120%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
+         </MagicCard>
+      </MagicContainer>
+   )
+}
diff --git a/apps/web/registry/special/example/marquee-3d.tsx b/apps/web/registry/special/example/marquee-3d.tsx
@@ -0,0 +1,59 @@
+import Marquee from '~/registry/special/marquee'
+
+const logos = [
+   {
+      name: 'Microsoft',
+      img: 'https://picsum.photos/id/1/200/300',
+   },
+   {
+      name: 'Apple',
+      img: 'https://picsum.photos/id/2/200/300',
+   },
+   {
+      name: 'Google',
+      img: 'https://picsum.photos/id/3/200/300',
+   },
+   {
+      name: 'Facebook',
+      img: 'https://picsum.photos/id/4/200/300',
+   },
+   {
+      name: 'LinkedIn',
+      img: 'https://picsum.photos/id/5/200/300',
+   },
+   {
+      name: 'Twitter',
+      img: 'https://picsum.photos/id/6/200/300',
+   },
+]
+
+function Marquee3D() {
+   return (
+      <div className="relative flex h-full w-96 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border bg-background px-20 md:shadow-xl">
+         <div className="flex flex-row gap-4 [perspective:300px]">
+            <Marquee
+               className="h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]"
+               vertical
+               style={{
+                  transform:
+              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',
+               }}
+            >
+               {logos.map((data, idx) => (
+                  <img
+                     key={idx}
+                     src={data.img}
+                     alt={data.name}
+                     className="mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300"
+                  />
+               ))}
+            </Marquee>
+         </div>
+
+         <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
+         <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
+      </div>
+   )
+}
+
+export default Marquee3D
diff --git a/apps/web/registry/special/example/marquee-demo-vertical.tsx b/apps/web/registry/special/example/marquee-demo-vertical.tsx
@@ -0,0 +1,82 @@
+import { cn } from '~/lib/utils'
+import Marquee from '~/registry/special/marquee'
+
+const reviews = [
+   {
+      name: 'Jack',
+      username: '@jack',
+      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
+      img: 'https://avatar.vercel.sh/jack',
+   },
+   {
+      name: 'Jill',
+      username: '@jill',
+      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
+      img: 'https://avatar.vercel.sh/jill',
+   },
+   {
+      name: 'John',
+      username: '@john',
+      body: 'I\'m at a loss for words. This is amazing. I love it.',
+      img: 'https://avatar.vercel.sh/john',
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={cn(
+            'relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4',
+            // light styles
+            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
+            // dark styles
+            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img className="rounded-full" width="32" height="32" alt="" src={img} />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">{username}</p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemoVertical() {
+   return (
+      <div className="relative flex h-96 flex-row items-center justify-center overflow-hidden rounded-lg border bg-background sm:px-20 md:shadow-xl">
+         <Marquee pauseOnHover vertical className="[--duration:20s]">
+            {firstRow.map(review => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
+            {secondRow.map(review => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white dark:from-background"></div>
+         <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white dark:from-background"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemoVertical
diff --git a/apps/web/registry/special/example/marquee-demo.tsx b/apps/web/registry/special/example/marquee-demo.tsx
@@ -0,0 +1,100 @@
+import { cn } from '~/lib/utils'
+import Marquee from '~/registry/special/marquee'
+
+const reviews = [
+   {
+      name: 'Jack',
+      username: '@jack',
+      body: 'I\'ve never seen anything like this before. It\'s amazing. I love it.',
+      img: 'https://avatar.vercel.sh/jack',
+   },
+   {
+      name: 'Jill',
+      username: '@jill',
+      body: 'I don\'t know what to say. I\'m speechless. This is amazing.',
+      img: 'https://avatar.vercel.sh/jill',
+   },
+   {
+      name: 'John',
+      username: '@john',
+      body: 'I\'m at a loss for words. This is amazing. I love it.',
+      img: 'https://avatar.vercel.sh/john',
+   },
+   {
+      name: 'Jane',
+      username: '@jane',
+      body: 'I\'m at a loss for words. This is amazing. I love it.',
+      img: 'https://avatar.vercel.sh/jane',
+   },
+   {
+      name: 'Jenny',
+      username: '@jenny',
+      body: 'I\'m at a loss for words. This is amazing. I love it.',
+      img: 'https://avatar.vercel.sh/jenny',
+   },
+   {
+      name: 'James',
+      username: '@james',
+      body: 'I\'m at a loss for words. This is amazing. I love it.',
+      img: 'https://avatar.vercel.sh/james',
+   },
+]
+
+const firstRow = reviews.slice(0, reviews.length / 2)
+const secondRow = reviews.slice(reviews.length / 2)
+
+function ReviewCard({
+   img,
+   name,
+   username,
+   body,
+}: {
+   img: string
+   name: string
+   username: string
+   body: string
+}) {
+   return (
+      <figure
+         className={cn(
+            'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',
+            // light styles
+            'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
+            // dark styles
+            'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]',
+         )}
+      >
+         <div className="flex flex-row items-center gap-2">
+            <img className="rounded-full" width="32" height="32" alt="" src={img} />
+            <div className="flex flex-col">
+               <figcaption className="text-sm font-medium dark:text-white">
+                  {name}
+               </figcaption>
+               <p className="text-xs font-medium dark:text-white/40">{username}</p>
+            </div>
+         </div>
+         <blockquote className="mt-2 text-sm">{body}</blockquote>
+      </figure>
+   )
+}
+
+function MarqueeDemo() {
+   return (
+      <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background py-20 md:shadow-xl">
+         <Marquee pauseOnHover className="[--duration:20s]">
+            {firstRow.map(review => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <Marquee reverse pauseOnHover className="[--duration:20s]">
+            {secondRow.map(review => (
+               <ReviewCard key={review.username} {...review} />
+            ))}
+         </Marquee>
+         <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
+         <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
+      </div>
+   )
+}
+
+export default MarqueeDemo