Morphing Tabs

This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.

API

Prop NameTypeDefaultDescription
classstring""Additional class names to style the component.
tabsstring[][]Tabs.
activeTabstring""Current active Tab.
marginnumber20Active tab margin left and right.
blurStdDeviationnumber6Svg blur stdDeviation, tab rounded use it.

Component Code

You can copy and paste the following code to create these components:

MorphingTabs.vue

Credits

Meteor
A component that displays a meteor shower animation with customizable meteor count and styling.
Morphing Text
This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.