Double Helix Words

Usage

import { DoubleHelixWords } from "@/ui/double-helix-words";

export function DoubleHelixWordsDemo() {
  return (
    <DoubleHelixWords
      gap={4}
      distance={80}
      placeholders="This world is truly fair"
      className="tracking-tight relative h-72 text-[clamp(1.125rem,11px+3.5vw,1.875rem)] font-bold leading-4"
    />
  );
}

Properties

Placeholders

Speed

Gap

Distance

API References

Styles API

type T = "root" | "backbone" | "bases";

Styles API	Type	Default	Annotation
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

Props API	Type	Default
el`?`	`Partial<Record<T, React.ElementType>>`	`root: "article", backbone: "section", bases: "span"`
placeholders`?`	`string \| string[]`	`undefined`
gap`?`	`number`	`6`
distance`?`	`number`	`100`
speed`?`	`number`	`400`
duration`?`	`number`	`4000`

Source Codes

double-helix-words.tsx

Double Helix Words

Usage

import { DoubleHelixWords } from "@/ui/double-helix-words";

export function DoubleHelixWordsDemo() {
  return (
    <DoubleHelixWords
      gap={4}
      distance={80}
      placeholders="This world is truly fair"
      className="tracking-tight relative h-72 text-[clamp(1.125rem,11px+3.5vw,1.875rem)] font-bold leading-4"
    />
  );
}

Properties

Placeholders

Speed

Gap

Distance

API References

Styles API

type T = "root" | "backbone" | "bases";

Styles API	Type	Default	Annotation
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

Props API	Type	Default
el`?`	`Partial<Record<T, React.ElementType>>`	`root: "article", backbone: "section", bases: "span"`
placeholders`?`	`string \| string[]`	`undefined`
gap`?`	`number`	`6`
distance`?`	`number`	`100`
speed`?`	`number`	`400`
duration`?`	`number`	`4000`

Double Helix Words

Usage

Properties

API References

Styles API

Props API

Source Codes

double-helix-words.tsx

globals.css

Double Helix Words

Usage

Properties

API References

Styles API

Props API

Source Codes

double-helix-words.tsx

globals.css