Before showing the number ---

After showing the number ---

As you can see, the GitHub icon is almost hidden when the number of GitHub stars is visible. You may need to adjust the max-width to fix this issue.

Thanks,
Arghya

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.

1. Typed my registered Email address. Clicked Submit button
2. A notification appeared to look into my mailbox for link.
3. After 5 minutes, I got email with link
4. When I clicked on the link, it says the link is expired.

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:

1. fade up
2. fade left
3. fade right
4. fade down

Any good abstraction layer would be helpful here too if you have any ideas

Magic UI Library Discord Server Proposal

Purpose

Create a dedicated Discord community for developers and users of the Magic UI library to enhance communication and collaboration.

Server Structure

General Channels

• #welcome: Introductions and rules.
• #announcements: Official updates.

Developer Channels

• #dev-general: Developer discussions.
• #dev-help: Support for developers.
• #dev-collaboration: Find collaborators.

User Channels

• #user-general: User discussions.
• #user-showcase: Project showcases.
• #user-support: Support for users.
• #user-feedback: User feedback.

Resource Channels

• #resources: Documentation and tutorials.
• #community-resources: User-created resources.

Off-topic Channels

• #off-topic: Non-technical discussions.
• #memes: Fun content.

Roles and Permissions

• Admin: Full control.
• Moderator: Manage and moderate.
• Developer: Access developer channels.
• User: Access user channels.
• Guest: Limited access.

Guidelines

• Respectful Communication: Be inclusive and respectful.
• No Spam: Keep channels relevant.
• Support Etiquette: Provide clear questions and context.

Documentation missed you need to install this dependency.
You can do it with the next command:

npm i @motionone/utils

You should add this to the docs!

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 Installation item in the table of contents seems to be incorrectly aligned, causing unnecessary spacing. I'm guessing that it's probably not at the same level as the other contents (as in nested), I could be wrong though.

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

localhost:3000 Error

Terminal Log

So, I'm new to magicui community I have forked the project and follow the step in contribution.md but after running the project I was facing this error I wasn't able to find out the ERROR can some help me fixing this

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:

1. Decouple components from Next.js: Ensure all components are independent of Next.js-specific features.
2. Create a build process for CRA and Vite: Set up the necessary configuration and scripts for both CRA and Vite.
3. Maintain backward compatibility: Ensure the components remain usable with Next.js after migration.
4. Update documentation: Provide clear instructions on how to use the components with CRA and Vite.

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.

Steps

1. Please assign issue to yourself or comment below if you are working on it
2. Please refer to #12 for guidelines on how to submit a PR with this new component

Preview text of "Staggered Letter Pull Up Animation" is not visible when dark mode is enabled. This may be due to an error in the className

Here's the corrected version:

I'd like to be assigned this issue, please.

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 :)

Ideas:

• Submit PRs referencing Magic UI to 100+ awesome lists. Some examples below:
  • https://github.com/brillout/awesome-react-components
  • https://github.com/aniftyco/awesome-tailwindcss
  • https://github.com/unicodeveloper/awesome-nextjs
  • https://github.com/anubhavsrivastava/awesome-ui-component-library
  • https://github.com/gztchan/awesome-design
• Newsletters Features
  • https://console.dev/
• Youtube videos
• Any other ideas??

This animation is dope!

https://codesandbox.io/p/sandbox/laughing-morning-cjvkxd?file=%2FApp.tsx%3A33%2C20&utm_medium=sandpack

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.

Link: https://github.com/teaguestockwell/react-icon-cloud

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.

https://wope.com/

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

Ideal Developer Experience Flow

npx magicui@latest init

npx magicui@latest add border-beam

How to start?

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

Requirements:

• Click on play button to open modal/dialog which plays a video
• Should ideally be customizable with props

Feedback

https://magicui.design/docs/components/animated-beam

TODO:

• Explore a way to make animated beams easier to use?

https://codepen.io/matthewgoshman/pen/bGMpKZy

This one is awesome! Would be sweet to recreate this in react / typescript with props for configurability.

Requirements:

• light/dark mode support
• typescript 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

• Local: http://localhost:3000
• Environments: .env.local
• Experiments (use at your own risk):
  · optimizeCss

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:

• Basic performance optimizations: simplifying the shader, reduce vertices, limit framerate
• Conditionally load the Globe(s) based on the client's device capability
• Use WebGPU rather than WebGL?
• Stop the animations that aren't in view