Source code
Click to see the source code for this component on GitHub.
Feel free to copy it and adjust it for your own use.
Installation
Add the Marquee component
npx ui-thing@latest magic marquee
Add CSS for Animation
Paste the following CSS into your tailwind.css file
@theme inline {
--animate-marquee: marquee var(--duration) infinite linear;
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(calc(-100% - var(--gap)));
}
}
}
Usage
Basic
Roma
kobe.halvorson49
Quidem attonbitus bestia usitas villa ocer.
Kennedy
tess_carter
Defessus curso crudelis delectatio reiciendis corona sonitus.
Alene
dangelo.muller0
Dolorem cilicium triduana abundans vos totus vaco chirographum.
Roma
kobe.halvorson49
Quidem attonbitus bestia usitas villa ocer.
Kennedy
tess_carter
Defessus curso crudelis delectatio reiciendis corona sonitus.
Alene
dangelo.muller0
Dolorem cilicium triduana abundans vos totus vaco chirographum.
Roma
kobe.halvorson49
Quidem attonbitus bestia usitas villa ocer.
Kennedy
tess_carter
Defessus curso crudelis delectatio reiciendis corona sonitus.
Alene
dangelo.muller0
Dolorem cilicium triduana abundans vos totus vaco chirographum.
Roma
kobe.halvorson49
Quidem attonbitus bestia usitas villa ocer.
Kennedy
tess_carter
Defessus curso crudelis delectatio reiciendis corona sonitus.
Alene
dangelo.muller0
Dolorem cilicium triduana abundans vos totus vaco chirographum.
Zelma
rodolfo10
Agnitio demo theca virtus vinitor aveho.
Marguerite
sabrina36
Umerus capto cervus cavus viscus amplus pecto.
Libby
ismael15
Sub varius vito suffragium utilis abeo consequuntur arto.
Colby
ariel_raynor
Deficio demonstro aspernatur tredecim ulterius theologus tego admiratio.
Zelma
rodolfo10
Agnitio demo theca virtus vinitor aveho.
Marguerite
sabrina36
Umerus capto cervus cavus viscus amplus pecto.
Libby
ismael15
Sub varius vito suffragium utilis abeo consequuntur arto.
Colby
ariel_raynor
Deficio demonstro aspernatur tredecim ulterius theologus tego admiratio.
Zelma
rodolfo10
Agnitio demo theca virtus vinitor aveho.
Marguerite
sabrina36
Umerus capto cervus cavus viscus amplus pecto.
Libby
ismael15
Sub varius vito suffragium utilis abeo consequuntur arto.
Colby
ariel_raynor
Deficio demonstro aspernatur tredecim ulterius theologus tego admiratio.
Zelma
rodolfo10
Agnitio demo theca virtus vinitor aveho.
Marguerite
sabrina36
Umerus capto cervus cavus viscus amplus pecto.
Libby
ismael15
Sub varius vito suffragium utilis abeo consequuntur arto.
Colby
ariel_raynor
Deficio demonstro aspernatur tredecim ulterius theologus tego admiratio.
Vertical
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
3D
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Charles
dianna59
Calamitas vorax arbitro labore cavus comparo cresco solvo.
Bertram
joshuah_luettgen-strosin
Capitulus dens artificiose bibo ventosus vaco videlicet commemoro.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.
Antwan
edna_beahan16
Aeternus vis subito aggero ea assentator voluptates virga.
Santina
kaley_trantow0
Astrum circumvenio demonstro adipisci reprehenderit villa.
Kaleigh
grant25
Tribuo voluptates temperantia aliquam creber arx debitis sollicito.