From 4a577a465a1d058cde54cb6527d2b62a32450c06 Mon Sep 17 00:00:00 2001 From: keonhee Lee <2kunhee94@gmail.com> Date: Fri, 4 Aug 2023 00:37:30 +0900 Subject: [PATCH] add sample animation --- apps/web/components/animated/spotlight.tsx | 53 +++++++ apps/web/components/examples/card/demo.tsx | 143 ++++++++++-------- .../web/content/docs/components/accordion.mdx | 93 ------------ 3 files changed, 132 insertions(+), 157 deletions(-) create mode 100644 apps/web/components/animated/spotlight.tsx diff --git a/apps/web/components/animated/spotlight.tsx b/apps/web/components/animated/spotlight.tsx new file mode 100644 index 0000000..2ec76e5 --- /dev/null +++ b/apps/web/components/animated/spotlight.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { MouseEvent, useCallback } from 'react'; +import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'; + +export default function Spotlight() { + let mouseX = useMotionValue(0); + let mouseY = useMotionValue(0); + + const handleMouseMove = useCallback( + ({ currentTarget, clientX, clientY }: MouseEvent) => { + let { left, top } = currentTarget.getBoundingClientRect(); + + mouseX.set(clientX - left); + mouseY.set(clientY - top); + }, + [mouseX, mouseY] + ); + + return ( +
+ +
+

+ Byline +

+
+ + Hero + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit, facilis illum + eum ullam nostrum atque quam. +

+
+
+ ); +} diff --git a/apps/web/components/examples/card/demo.tsx b/apps/web/components/examples/card/demo.tsx index b7f0c39..4aac485 100644 --- a/apps/web/components/examples/card/demo.tsx +++ b/apps/web/components/examples/card/demo.tsx @@ -11,75 +11,90 @@ import { Separator, TypographyMuted, } from 'ui/components'; +import { + MotionValue, + animate, + motion, + useMotionTemplate, + useMotionValue, + useTransform, +} from 'framer-motion'; +import { useCallback, MouseEvent, useRef } from 'react'; export default function CardDemo() { - const IMAGE = - 'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/mbp-digitalmat-gallery-2-202206_GEO_KR?wid=364&hei=333&fmt=png-alpha&.v=1665427482788'; + const cardRef = useRef(null); + const mouseX = useMotionValue(0); + const mouseY = useMotionValue(0); + const depth = 45; + + const handleMouseMove = useCallback( + ({ currentTarget, clientX, clientY }: MouseEvent) => { + let { left, top } = currentTarget.getBoundingClientRect(); + + mouseX.set(clientX - left); + mouseY.set(clientY - top); + }, + [mouseX, mouseY] + ); + + let rotateX = useTransform(mouseX, (newMouseX) => { + if (!cardRef.current) return 0; + + const rect = cardRef.current.getBoundingClientRect(); + const newRotateX = newMouseX - rect.left - rect.height / 2; + + return -newRotateX / depth; + }); + let rotateY = useTransform(mouseY, (newMouseY) => { + if (!cardRef.current) return 0; + + const rect = cardRef.current.getBoundingClientRect(); + const newRotateY = newMouseY - rect.top - rect.width / 2; + + return newRotateY / depth; + }); return ( - - - MacBook pro 13 - - - - MacBook Pro 13 -
- ₩1,790,000부터 - -
- - -
- - - 차세대 Apple M2 칩과 전문가급 성능을 유지해주는 액티브 쿨링 - 시스템으로 더 많은 일을 더 빠르게 처리 - -
- -
- - - 하루 종일 쓰고도 밤 늦게까지 너끈한 최대 20시간의 배터리 사용 - 시간각주¹ - -
- -
- - - 생생한 색상과 놀라운 디테일을 보여주는 500 니트 밝기의 Retina - 디스플레이 - -
- -
- - - 고속 액세서리에 연결하고 전원을 공급해주는 Thunderbolt 포트 2개 - -
- + //
+ // + // 3D Card + // + //
+ + + + + Card + + + Component + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit, facilis + illum eum ullam nostrum atque quam. +

- - - MacBook Pro 13 더 살펴보기 - - - - + ); } diff --git a/apps/web/content/docs/components/accordion.mdx b/apps/web/content/docs/components/accordion.mdx index 947076c..6864114 100644 --- a/apps/web/content/docs/components/accordion.mdx +++ b/apps/web/content/docs/components/accordion.mdx @@ -12,96 +12,3 @@ radix: - -## Installation - -```bash -npx shadcn-ui add accordion -``` - - - - Manual Installation - - -1. Install the `@radix-ui/react-accordion` component from radix-ui: - -```bash -npm install @radix-ui/react-accordion -``` - -2. Copy and paste the following code into your project. - - - - - -This is the `` primitive. You can place it in a file at `components/ui/accordion.tsx`. - - - - - - -## tailwind.config.js - -Add the following animations to your `tailwind.config.js` file: - -```ts -/** @type {import('tailwindcss').Config} */ -module.exports = { - theme: { - extend: { - keyframes: { - 'accordion-down': { - from: { height: 0 }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: 0 }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - }, - }, - }, -}; -``` - -## Usage - -```tsx -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from '@/components/ui/accordion'; -``` - -```tsx - - - 접근 가능성은 어떤가요 ? - - WAI-ARIA 의 디자인 패턴은 차용 했습니다. - - - Yes. It adheres to the WAI-ARIA design pattern. - - - - ㅇㅇㅇ - Yㅇㅇㅇ - - - Is it ㅇㅇㅇ? - - Yes. It adheres to the WAI-ARIA design pattern. - - - -```