Drag Elements Momentum Demo

PreviousNext

A block component.

Docs
fancyblock

Preview

Loading preview…
examples/blocks/drag-elements-momentum-demo.tsx
import React from "react"

import DragElements from "@/components/fancy/blocks/drag-elements"

const DragElementsDemo: React.FC = () => {
  return (
    <div className="w-dvw h-dvh relative bg-[#1f464d] text-[#1f464d] overflow-hidden">
      <DragElements dragMomentum={true} className="p-30 md:p-40">
        <div className="text-2xl md:text-6xl px-6 py-3 md:px-8 md:py-4 rounded-full bg-[#e794da] shadow-lg rotate-[-2deg] justify-center items-center">
          super fun ✿
        </div>
        <div className="text-2xl md:text-6xl px-6 py-3 md:px-8 md:py-4 rounded-full bg-[#e794da] shadow-lg rotate-[2deg] justify-center items-center">
          funky time! ✴
        </div>
        <div className="text-2xl md:text-6xl px-6 py-3 md:px-8 md:py-4 rounded-full bg-[#e794da] shadow-lg rotate-[-4deg] justify-center items-center">
          awesome ✺
        </div>
      </DragElements>
    </div>
  )
}

export default DragElementsDemo

Installation

npx shadcn@latest add @fancy/drag-elements-momentum-demo

Usage

import { DragElementsMomentumDemo } from "@/components/drag-elements-momentum-demo"
<DragElementsMomentumDemo />