-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🦄 feat: support framer motion of hero (#9)
- Loading branch information
Showing
6 changed files
with
122 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| { | ||
| "version": 1.1, | ||
| "atDirectives": [ | ||
| { | ||
| "name": "@tailwind", | ||
| "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", | ||
| "references": [ | ||
| { | ||
| "name": "Tailwind Documentation", | ||
| "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "@apply", | ||
| "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", | ||
| "references": [ | ||
| { | ||
| "name": "Tailwind Documentation", | ||
| "url": "https://tailwindcss.com/docs/functions-and-directives#apply" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "@responsive", | ||
| "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", | ||
| "references": [ | ||
| { | ||
| "name": "Tailwind Documentation", | ||
| "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "@screen", | ||
| "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", | ||
| "references": [ | ||
| { | ||
| "name": "Tailwind Documentation", | ||
| "url": "https://tailwindcss.com/docs/functions-and-directives#screen" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "@variants", | ||
| "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", | ||
| "references": [ | ||
| { | ||
| "name": "Tailwind Documentation", | ||
| "url": "https://tailwindcss.com/docs/functions-and-directives#variants" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React, { type ReactNode } from 'react' | ||
| import { motion } from 'framer-motion' | ||
|
|
||
| interface Props { | ||
| className?: string | ||
| disabledHover?: boolean | ||
| children: ReactNode | ||
| } | ||
|
|
||
| export const MotionWrapperFlash: React.FC<Props> = (props) => { | ||
| const { disabledHover = false, children, className } = props | ||
| return ( | ||
| <motion.span | ||
| className={className} | ||
| initial={{ opacity: 0, scale: 0.8, rotate: -20 }} | ||
| animate={{ opacity: 1, scale: 1, rotate: 0 }} | ||
| whileHover={ | ||
| !disabledHover | ||
| ? { | ||
| scale: 1.1, | ||
| rotate: 10, | ||
| transition: { duration: 0.3 }, | ||
| } | ||
| : {} | ||
| } | ||
| transition={{ | ||
| duration: 0.6, | ||
| ease: [0.2, 0.8, 0.6, 1], | ||
| scale: { | ||
| type: 'spring', | ||
| stiffness: 260, | ||
| }, | ||
| rotate: { | ||
| type: 'spring', | ||
| stiffness: 150, | ||
| }, | ||
| color: { | ||
| duration: 0.3, | ||
| }, | ||
| }} | ||
| > | ||
| {children} | ||
| </motion.span> | ||
| ) | ||
| } |