注目新着
マーキーLogos Marquee Strip
An endless horizontal strip of wordmarks that loops seamlessly for social proof.
#marquee#logos#infinite-scroll
3 個のフレームワーク初級
Loading…
A looping row of dotted skill pills, ideal for a portfolio or about page.
<style>
@keyframes marquee-skills-scroll {
to { transform: translateX(-50%); }
}
</style>
<section class="w-full overflow-hidden py-6" aria-label="Skills">
<div class="flex w-max animate-[marquee-skills-scroll_34s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
<ul class="flex shrink-0 items-center gap-2.5 pr-2.5 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-2.5 motion-reduce:pr-0">
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>TypeScript</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>React</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>Node.js</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>GraphQL</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>PostgreSQL</li>
</ul>
<ul class="flex shrink-0 items-center gap-2.5 pr-2.5 motion-reduce:hidden" aria-hidden="true">
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>TypeScript</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>React</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>Node.js</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>GraphQL</li>
<li class="inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-gray-100 px-3.5 py-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>PostgreSQL</li>
</ul>
</div>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
skills | string[] | 10 sample skills | Skills |
durationSeconds | number | 34 | Duration seconds |
className | string | - | ルート要素にマージされる追加クラス。 |
Each pill carries a small accent dot; pass your own `skills` array and tune `durationSeconds`. Reduced motion collapses the loop into a static centred wrapped row and drops the clone.