hextastudio/ui needs your support to stay running 🫶 Help us
Brand Scroller
A scroller for brand logos.
Brand Scroller 1
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
keyframes: {tsx
import { BsAmazon, BsGoogle, BsSpotify, BsYoutube } from "react-icons/bs";
const HorizontalScroller1 = () => {
return (
<>
<div className="group flex overflow-hidden py-2 [--gap:2rem] [gap:var(--gap)] flex-row max-w-full [--duration:40s] [mask-image:linear-gradient(to_right,_rgba(0,_0,_0,_0),rgba(0,_0,_0,_1)_10%,rgba(0,_0,_0,_1)_90%,rgba(0,_0,_0,_0))]">
{Array(4)
.fill(0)
.map((_, i) => (
<divBrand Scroller 2
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
tsx
import { BsAmazon, BsGoogle, BsSpotify, BsYoutube } from "react-icons/bs";
const HorizontalScroller2 = () => {
return (
<>
<div className="group flex overflow-hidden py-2 [--gap:2rem] [gap:var(--gap)] flex-row max-w-full [--duration:40s] [mask-image:linear-gradient(to_right,_rgba(0,_0,_0,_0),rgba(0,_0,_0,_1)_10%,rgba(0,_0,_0,_1)_90%,rgba(0,_0,_0,_0))]">
{Array(4)
.fill(0)
.map((_, i) => (
<divBrand Scroller 3
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
Spotify
YouTube
Amazon
tsx
import { BsAmazon, BsGoogle, BsSpotify, BsYoutube } from "react-icons/bs";
const HorizontalScroller3 = () => {
return (
<>
<div className="group flex overflow-hidden py-2 [--gap:2rem] [gap:var(--gap)] flex-row max-w-full [--duration:40s] [mask-image:linear-gradient(to_right,_rgba(0,_0,_0,_0),rgba(0,_0,_0,_1)_10%,rgba(0,_0,_0,_1)_90%,rgba(0,_0,_0,_0))]">
<div className="flex flex-col [gap:var(--gap)]">
<div className="flex [gap:var(--gap)]">
{Array(4)
.fill(0)