CurvedLoop

PreviousNext

Flowing looping text path along a customizable curve with drag interaction.

Docs
react-bitscomponent

Preview

Loading preview…
CurvedLoop/CurvedLoop.css
.curved-loop-jacket {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.curved-loop-svg {
  user-select: none;
  width: 100%;
  aspect-ratio: 100 / 12;
  overflow: visible;
  display: block;
  font-size: 6rem;
  fill: #ffffff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

Installation

npx shadcn@latest add @react-bits/CurvedLoop-TS-CSS

Usage

import { CurvedLoopTSCSS } from "@/components/CurvedLoop-TS-CSS"
<CurvedLoopTSCSS />