Marquee
Um componente para criar conteúdo com rolagem infinita.
Uso
Use o slot padrão com o seu conteúdo para criar uma animação de rolagem infinita.
<template>
<NMarquee>
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Pausar ao passar o mouse
Use a prop pause-on-hover para pausar a animação quando o usuário passa o mouse sobre o conteúdo.
<template>
<NMarquee pause-on-hover>
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Invertido
Use a prop reverse para inverter a direção da animação.
<template>
<NMarquee reverse>
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Orientação
Use a prop orientation para alterar a direção da rolagem.
<template>
<NMarquee orientation="vertical">
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Repetir
Use a prop repeat para especificar quantas vezes o conteúdo deve ser repetido na animação.
<template>
<NMarquee :repeat="6">
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Overlay
Use a prop overlay para remover as sobreposições de gradiente nas bordas do marquee.
<template>
<NMarquee :overlay="false">
<NIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<NIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</NMarquee>
</template>
Exemplos
Depoimentos
Use o componente Marquee para criar uma animação de rolagem infinita para os seus depoimentos.
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
We were using a SaaS service for the docs site, but were left unfulfilled. We put in the effort to do it in house, with UI Pro and not only did we get complimented by a prospect on our site, but they wanted to know our platform.
Anthony Bettini
CEO and founder of VulnCheck
Wow, Nuxt UI Pro is a total game-changer! I'm seriously impressed with the quality, attention to detail, and the insane variety of components you get. It's like hitting the jackpot for any developer. I've saved countless hours that I would've spent stressing over making my apps look good, with amazing accessible UX, and instead, I've been able to focus on the real deal – building the app itself. It's an instant buy for me, every single time. No second thoughts!
Yaz Jallad
Founder Ninjaparade Digital
Nuxt UI Pro saves 100s of hours of dev and design time while delivering a clean professional look on any device.
Kevin Olson
Founder of Fume.app
I decided to replace my custom-built components with a component library and chose Nuxt UI Pro. It only took me a few hours, and the new UI looks more professional. Integrating the library is easy; the components are well-documented and highly customizable. I can only recommend it; this library is my new choice for new SaaS products.
Michael Hoffmann
Senior Frontend Developer
Nuxt UI Pro is my go to component library. Out-of-the-box it handles all of the UI demands I throw at it while looking great. The customisation is really worth thought out, allowing you to override components in a breeze. Always amazed at the improvements dropped in each update as well, the team is doing an amazing job.
Harlan Wilton
Nuxt core team member
I jumped at the chance to buy the Nuxt team's new UI kit as soon as I saw it. While I'm already a fan of Nuxt UI, the pro version takes it to a whole new level and lets me paste entire blocks into all my projects, saving me a ton of time.
Thomas Sanlis
Freelance developer and designer
Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
Benjamin Code
YouTuber and SaaS builder
Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down.
Estéban Soubiran
Web developer and UnJS member
Capturas de tela
Use o componente Marquee para criar uma animação de rolagem infinita para as suas capturas de tela.
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
pauseOnHover | false | boolean Pause the marquee on hover. |
reverse | false | boolean Reverse the direction of the marquee. |
orientation | 'horizontal' | "vertical" | "horizontal"The orientation of the marquee. |
repeat | 4 | numberThe number of times the marquee should repeat. |
overlay | true | boolean Display an overlay on the marquee. |
ui | { root?: SlotClass; content?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Tema
app.config.ts
export default defineAppConfig({
ui: {
marquee: {
slots: {
root: 'group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]',
content: 'flex items-center shrink-0 justify-around gap-(--gap) min-w-max'
},
variants: {
orientation: {
horizontal: {
content: 'w-full'
},
vertical: {
content: 'h-full'
}
},
pauseOnHover: {
true: {
content: 'group-hover:[animation-play-state:paused]'
}
},
reverse: {
true: {
content: '![animation-direction:reverse]'
}
},
overlay: {
true: {
root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
class: {
root: 'flex-row',
content: 'flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden'
}
},
{
orientation: 'horizontal',
overlay: true,
class: {
root: 'before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden'
}
},
{
orientation: 'vertical',
class: {
root: 'flex-col',
content: 'flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden'
}
},
{
orientation: 'vertical',
overlay: true,
class: {
root: 'before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden'
}
}
]
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
marquee: {
slots: {
root: 'group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]',
content: 'flex items-center shrink-0 justify-around gap-(--gap) min-w-max'
},
variants: {
orientation: {
horizontal: {
content: 'w-full'
},
vertical: {
content: 'h-full'
}
},
pauseOnHover: {
true: {
content: 'group-hover:[animation-play-state:paused]'
}
},
reverse: {
true: {
content: '![animation-direction:reverse]'
}
},
overlay: {
true: {
root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
class: {
root: 'flex-row',
content: 'flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden'
}
},
{
orientation: 'horizontal',
overlay: true,
class: {
root: 'before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden'
}
},
{
orientation: 'vertical',
class: {
root: 'flex-col',
content: 'flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden'
}
},
{
orientation: 'vertical',
overlay: true,
class: {
root: 'before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden'
}
}
]
}
}
})
]
})
Changelog
No recent changes