feat(animated-theme-toggler): add new shape variants and examples

[chishiyac]

Description

Extends Animated Theme Toggler with optional clip-path–based view-transition shapes (circle, diamond, rectangle, hexagon, and star) on top of the existing View Transitions API flow. Adds per-variant doc previews, registry entries, and public registry/LLM artifacts.

Closes #946.

Changes

• New animatedVariant prop ("circle" | "diamond" | "hexagon" | "rectangle" | "star", default "circle") with per-shape clip-path math tied to the button center and viewport.
• Transition duration synced via --magicui-theme-toggle-vt-duration and injected styles for ::view-transition-group(root); linear easing for the star variant to reduce polygon interpolation artifacts.
• MDX docs: animatedVariant usage, recommended global CSS, props table, and isolated previews per variant.
• New registry examples (animated-theme-toggler-diamond-demo, hexagon, rectangle, star) and matching registry/index/public JSON and llms.txt / llms-full.txt updates.

Motivation

Issue #946 asked for additional shape variants for AnimatedThemeToggler so the theme toggle is not limited to a circular reveal. The goal was to support shapes such as star, diamond, rectangle, and hexagon while reusing the same animation/view-transition approach, giving teams more flexibility to align the effect with their design system. This PR implements that proposal and documents it in the component page and registry.

Breaking Changes

None. Default remains animatedVariant="circle"; usage without the prop is unchanged.

Screenshots

Device / Browser / Viewport:

Gravacao.de.Tela.2026-04-11.as.03.56.51.mov

Before	After
N/A (behavior unchanged for default circle)	Shape variants + docs/previews/registry as above; screenshots optional (View Transitions–capable browser)

[vercel]

@chishiyac is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[chishiyac]

@dikshantgulekar20-oss Hi! I’ve opened a PR with a potential fix for this issue.

Whenever you have some time, could you please take a look and review it? Since you originally opened the issue #946, I thought it would be best to confirm with you before moving forward.

Thanks ❤️!

[chishiyac]

Hey @dikshantgulekar20-oss, thanks again for the work and for taking the time on this.

I really liked and went along with the direction of your fixes and ideas on top of my implementations (including the fromCenter behavior and the shape work). I’ve wired that into the component: fromCenter, the optional variant alias alongside animatedVariant, square and triangle clip-path variants, the exported TransitionVariant type, and I updated the docs / registry / llms. I also added you to the credits in the documentation.

The only thing I don’t agree with is using a large multi-card showcase as the main doc preview, that breaks away from the pattern of the other Magic UI pages and from the platform’s visual contrast and rhythm. That’s why I kept the main preview minimal (same style as the other components).

None of that takes away from the quality of what you did: the logic and the API turned out really well. Thanks again for sharing it. ❤️

[dikshantgulekar20-oss]

Hey 👋

Thank you so much for your kind words and for taking the time to review and integrate my ideas I truly appreciate it. I’m really glad that you liked the fromCenter behavior and the additional shape variants discussed in #946. It means a lot to see those ideas being incorporated into the component.

I would also like to sincerely apologize for the multi-card showcase approach I suggested. I understand your point about maintaining consistency with the existing design patterns and visual rhythm across Magic UI. That was my oversight, and I’ll definitely keep this in mind for future contributions.

Since this structure and workflow are still relatively new to me, I’m continuously learning, and contributing here has been a great experience. Magic UI is genuinely motivating — both in terms of implementation quality and design ideas — and I’m learning a lot through this process.

I’ve reviewed the updated implementation, and everything looks very well structured and thoughtfully organized. The approach feels clean, consistent, and aligns nicely with the overall system. I’m completely happy with the direction you’ve taken.

Thanks again for the support, feedback, and for the opportunity to contribute. Looking forward to contributing more in the future 🫡