UI Library for Design Engineers
Visit https://magicui.design/docs to view the documentation.
Visit our contributing guide to learn how to contribute. It only takes ~5 minutes to add your own!
Licensed under the MIT license.
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
Home Page: https://magicui.design
License: MIT License
UI Library for Design Engineers
Visit https://magicui.design/docs to view the documentation.
Visit our contributing guide to learn how to contribute. It only takes ~5 minutes to add your own!
Licensed under the MIT license.
Scroll based velocity text animation component code is not showing in website
Placing a reload button close to the preview container would be convenient for users to reload or view the animation again without having to reload the page every time.
I have followed the steps need and installed all the packages but I am getting this error message
⨯ Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
⨯ Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
⨯ Error: Cannot find package 'C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\USER\Documents\Programming\open-source\magicui\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_qyaeezilld56lj2pad6hqnrkxu\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Please do you have any idea how I can fix this?
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI. Also maybe some fixes to the classnames here.
Please refer to #12 for guidelines on how to submit a PR with this new component
I'm trying to log into Magic UI.
I tried multiple times but of no success.
Create a new bento grid variant
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
I'm making this issue to track any ports of Magic UI components to Svelte
If you have any ports, feel free to comment them below to share with the community!
We will eventually try and merge everything together in one repo if possible down the line.
However our current priority will be on react first.
If someone from the community wants to take initiative to integrate Svelte support into this repo please feel free to comment below and get started :) No permission needed
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires a bit more work than the others. This issue requires copying the text animation component from variantvault and adding it to Magic UI plus some additional steps.
I think the best way to go about this is to add a default "fade-up" variant, and then also make 3 other variants showcasing the other directions.
The variants would be:
Any good abstraction layer would be helpful here too if you have any ideas
Create a dedicated Discord community for developers and users of the Magic UI library to enhance communication and collaboration.
#welcome
: Introductions and rules.#announcements
: Official updates.#dev-general
: Developer discussions.#dev-help
: Support for developers.#dev-collaboration
: Find collaborators.#user-general
: User discussions.#user-showcase
: Project showcases.#user-support
: Support for users.#user-feedback
: User feedback.#resources
: Documentation and tutorials.#community-resources
: User-created resources.#off-topic
: Non-technical discussions.#memes
: Fun content.As you can see in the video, when you hover over the "Browse Components" button, the <ChevronRight/>
icon should translate to the right a little bit. However, this isn't happening.
The particles effect from https://startup-template-sage.vercel.app/ would be dope to add to the open source https://magicui.design
I'll take care of it
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
Is it necessary to declare the packageManager
version in the package.json
? If I have a different version of pnpm
installed on my system, it causes an error. I believe we can remove this or make it less restrictive. Let me know your thoughts @dillionverma
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
To make the library more versatile and easier to integrate with various projects, I propose migrating the components to work with Create React App (CRA) and Vite. This will allow developers who do not use Next.js to benefit from the components and will enhance the overall usability and adoption of our library.
Objectives:
Expected Outcome:
The migration should result in fully functional components that run seamlessly in CRA/Vite, and Next.js with the same functionalities and appearance
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
Hi friends :)
I'd love your help to spread the word about Magic UI as far as possible!
If you share it somewhere please comment it below so we can keep track :)
This animation is dope!
We should remove the chakra dependency and make a simple configurable button with react + typescript + framer motion + tailwindcss :)
Comment below if you are taking this on!
https://x.com/jh3yy/status/1732553845530566855?s=20
This one is really cool and could be used as a subtle background animation
we should convert this to react + typescript + tailwindcss and make it easy to use with props
also credit the original author for inspiration!
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
It would be an idea to add this interactive component of floating 3D icons.
Confetti??? 🎉
We should definitely have some nice, clean, tasteful, and easy to use confetti animations that devs can just import into their products.
Every person should be able to do this easily.
For example, I like the clean one shown here.
We should credit everyone who we take inspiration from!
Bento Grid is showing this error
And why is this component is async in this example?
export async function BentoDemo() {
return (
<BentoGrid className="lg:grid-rows-3">
{features.map((feature) => (
<BentoCard key={feature.name} {...feature} />
))}
</BentoGrid>
);
}
Can't seem to explain why this is happening. I've tried this across 4 different browsers with the same issue but first noticed it in Brave. On dark mode, everything appears to be fine. Switching to light mode or system (light) has this weird dark/light mix going on. This is off of the base project after adding a theme changer and favicon change.
https://www.loom.com/share/3e233e4ceb05473fb2137a9aab9666cd?sid=2606bed2-e78c-4b2c-bf9f-fc693e9867a0
Something just like this would be amazing! https://ui.shadcn.com/docs/cli
We should be able to install magicui directly from the cli
npx magicui@latest init
npx magicui@latest add border-beam
Read through the shadcn cli and how it was first implemented for the MVP shadcn-ui/ui#112
Read through the current cli package and see how it was improved https://github.com/shadcn-ui/ui/tree/main/packages/cli
Implement the same foundation here :)
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
Please refer to #12 for guidelines on how to submit a PR with this new component
We need to make a hero video component
Similar Demo here: https://wope.com
https://magicui.design/docs/components/animated-beam
https://codepen.io/matthewgoshman/pen/bGMpKZy
This one is awesome! Would be sweet to recreate this in react / typescript with props for configurability.
Please assign issue to yourself or comment below if you want to tackle this :)
Also we must credit original author!
I'm making this issue to track any ports of Magic UI components to VueJS
If you have any ports, feel free to comment them below to share with the community!
We will eventually try and merge everything together in one repo if possible down the line.
However our current priority will be on react first.
If someone from the community wants to take initiative to integrate VueJS support into this repo please feel free to comment below and get started :) No permission needed
https://x.com/learnframer/status/1754905348413194638
This one is awesome! Would be sweet to recreate this in react / typescript / framer motion with props for configurability.
Please assign issue to yourself or comment below if you want to tackle this :)
Also we must credit original author!!
After downgrading my Node version to v18 from v20 in order to make the content layer dependency to work, but weirdly it prompts a warning whenever I run the pnpm dev
command. Here is what happens:
WARN Unsupported engine: wanted: {"node":">=20.6.1"} (current: {"node":"v18.17.0","pnpm":"9.0.4"})
[email protected] dev C:\Users\USER\Documents\Programming\open-source\magicui
next dev
▲ Next.js 14.1.0
Warning: Contentlayer might not work as expected on Windows
✓ Ready in 63.8s
Contentlayer config change detected. Updating type definitions and data...
Warning: Found 23 problems in 49 documents.
└── 23 documents contain field data which didn't match the structure defined in the document type definition. (Skipping documents)
• "docs/changelog.mdx" of type "Doc" has the following incompatible fields:
• published: "false\r"
• "docs/installation.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/story.mdx" of type "Doc" has the following incompatible fields:
• published: "false\r"
• "docs/components/animated-grid-pattern.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/animated-list.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/avatar-circles.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/bento-grid.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/blur-in.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/box-reveal.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/fade-text.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/flip-text.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/gradual-spacing.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/icon-cloud.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/letter-pullup.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/scroll-based-velocity.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/separate-away.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/shine-border.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/shiny-button.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/typing-animation.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• "docs/components/wavy-text.mdx" of type "Doc" has the following incompatible fields:
• published: "true\r"
• ... 3 more documents (Use the --verbose CLI option to show all documents)
Generated 26 documents in .contentlayer
Can someone please suggest a fix to this?
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI. Also maybe some fixes to the classnames here.
Please refer to #12 for guidelines on how to submit a PR with this new component
A good friend @ChrisAbdo has been incredibly kind and given us permission to merge some of his framer motion components into the Magic UI Repo!
https://github.com/chrisabdo/motionvariants
https://variantvault.chrisabdo.dev/text-variants
This issue requires copying the text animation component from variantvault and adding it to Magic UI.
Please refer to #12 for guidelines on how to submit a PR with this new component
beautiful button here 😍
we should re-create this in react + typescript + tailwindcss :)
Any plans to have a React-free version in Vanilla JS or WC for compatibility with other frameworks like Vue, Svelte etc?
Can someone make a PR to enforce prettier + eslint standards so that all new PRs have the same format?
We might need some sort of lint on commit or lint on deploy flow.
Need some input from the community on best developer experience
https://github.com/shadcn-ui/ui is a good standard to refer to imo
Borderbeam
<script lang="ts">
import { cn } from '$lib/utils';
interface Props {
class?: string;
size?: number;
duration?: number;
borderWidth?: number;
anchor?: number;
colorFrom?: string;
colorTo?: string;
delay?: number;
}
let {
class: className,
size = 200,
duration = 15,
anchor = 90,
borderWidth = 1.5,
colorFrom = '#ffaa40',
colorTo = '#9c40ff',
delay = 0
}: Props = $props();
let styleVars = $derived.by(() => {
return `--size: ${size};
--duration: ${duration};
--anchor: ${anchor};
--border-width: ${borderWidth};
--color-from: ${colorFrom};
--color-to: ${colorTo};
--delay: -${delay}s;`;
});
</script>
<div
style={styleVars}
class={cn(
'absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
// mask styles
'![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
// pseudo styles
'after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
className
)}
></div>
Shimmer Button
<script lang="ts">
import { cn } from '$lib/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
interface ShimmerButtonProps extends HTMLButtonAttributes {
shimmerColor?: string;
shimmerSize?: string;
borderRadius?: string;
shimmerDuration?: string;
background?: string;
class?: string;
children?: Snippet;
}
let {
shimmerColor = '#ffffff',
shimmerSize = '0.05em',
shimmerDuration = '3s',
borderRadius = '100px',
background = 'rgba(0, 0, 0, 1)',
class: className,
children,
...restProps
}: ShimmerButtonProps = $props();
let styleVars = $derived.by(() => {
return `--spread: 90deg;
--shimmer-color:${shimmerColor};
--radius: ${borderRadius};
--speed: ${shimmerDuration};
--cut: ${shimmerSize};
--bg: ${background};`;
});
</script>
<button
style={styleVars}
class={cn(
'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]',
className
)}
{...restProps}
>
<!-- spark container -->
<div class={cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')}>
<!-- spark -->
<div
class="animate-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]"
>
<!-- spark before -->
<div
class="animate-spin-around absolute inset-[-100%] w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"
></div>
</div>
</div>
{#if children}
{@render children()}
{/if}
<!-- Highlight -->
<div
class={cn(
'insert-0 absolute h-full w-full',
'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
// transition
'transform-gpu transition-all duration-300 ease-in-out',
// on hover
'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
// on click
'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
)}
></div>
<!-- backdrop -->
<div
class={cn(
'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
)}
></div>
</button>
https://codepen.io/Unleashed-Design/pen/MWOaPGL
We should recreate this in react + typescript + tailwindcss and credit the original author!
This would be an amazing addition to the magicui community :)
Please comment below if you are interested to take this on so we can assign this to you
[
](url)
A lot of complaints regarding intensive gpu usage that damages UX and first impressions. This is especially prominent on non-MacOS devices. On my windows laptop, roughly 100% of my GPU is being used on the front page.
A preliminary inspection I conducted showed that the Globe, cobe, is really resource intensive. I haven't done much profiling besides that, but you'd wanna see if the following options are viable:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.