VariableProximity

PreviousNext

Letter styling changes continuously with pointer distance mapping.

Docs
react-bitscomponent

Preview

Loading preview…
VariableProximity/VariableProximity.css
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

.variable-proximity {
  font-family: 'Roboto Flex', sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Installation

npx shadcn@latest add @react-bits/VariableProximity-JS-CSS

Usage

import { VariableProximityJSCSS } from "@/components/VariableProximity-JS-CSS"
<VariableProximityJSCSS />