Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Double Helix Words
CopyButton

A button that lets users copy text to the clipboard with a single click.

Floating Indicator

A floating visual cue that indicates or highlights elements in the UI.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Double Helix Words

An animated text component that displays words in a double-helix style motion, ideal for dynamic headlines or creative effects.

Usage

Basic usage example to quickly see how the DoubleHelixWords works.

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

Interactive configurator to explore customization options for the DoubleHelixWords component.

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

export function DoubleHelixWordsDemo() {
  return <DoubleHelixWords placeholders="Input Your Words" className="relative h-80 text-xl" />;
}

API References

Styles API

type T = "root" | "backbone" | "bases";
Styles APITypeDefaultAnnotation
className?stringundefinedpass to root component <div>
classNames?Partial<Record<T, string>>undefined
style?CSSPropertiesundefinedpass to root component <div>
styles?Partial<Record<T, CSSProperties>>undefined

Props API

Props APITypeDefaultAnnotation
el?Partial<Record<T, React.ElementType>>root: "article", backbone: "section", bases: "span"
placeholders?string | string[]undefined
gap?number6
distance?number100
speed?number400
duration?number4000

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

double-helix-words.tsx
globals.css
/* double-helix-words */ @layer base { .stylelayer-doublehelixwords { & > * { @apply absolute size-full flex flex-row items-center justify-center gap-[--gap,8px] pointer-events-none select-none; & * { @apply [transform:translateY(calc(sin(var(--angle))*var(--distance,100px)))_scale(calc(cos(var(--angle))*0.5+0.5))] [animation:spiral_var(--speed,4s)_linear_infinite] pointer-events-none select-none; } } } @property --angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes spiral { 0% { --angle: 0deg; } 50% { opacity: 0; } 100% { --angle: 360deg; } } }