DigitalLoomBackground

Heroes 160

About

A dynamic, full-screen hero background that draws animated, interwoven threads on an HTML canvas—simulating a futuristic digital loom for immersive UI experiences.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DigitalLoomBackground to your project and fits it to your theme.

Code

How DigitalLoomBackground is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";
import DigitalLoomBackground from "@/components/ui/digital-loom-background";

const fadeUpVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: (i) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: i * 0.2,
      duration: 1,
      ease: "easeInOut",
    },
  }),
};

const DemoOne = () => {
  return (
    <DigitalLoomBackground>
      <div className="text-center max-w-4xl mx-auto px-4">
        <motion.div
          variants={fadeUpVariants}
          initial="hidden"
          animate="visible"
          custom={0}
          className="mb-6 inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 px-6 py-2 text-sm text-white/80 backdrop-blur-md"
        >
          A New Dimension of UI
        </motion.div>

        <motion.h1
          variants={fadeUpVariants}
          initial="hidden"
          animate="visible"
          custom={1}
          className="text-5xl font-bold tracking-tight text-white sm:text-7xl md:text-8xl"
        >
          The Digital Loom
        </motion.h1>

        <motion.p
          variants={fadeUpVariants}
          initial="hidden"
          animate="visible"
          custom={2}
          className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-white/60"
        >
          An intricate and futuristic hero section featuring a dynamic
          background of beautifully interwoven, animated threads.
        </motion.p>

        <motion.div
          variants={fadeUpVariants}
          initial="hidden"
          animate="visible"
          custom={3}
          className="mt-12 flex items-center justify-center gap-x-6"
        >
          <button className="rounded-full bg-white px-8 py-4 text-lg font-semibold text-black shadow-lg shadow-white/20 transition-transform hover:scale-105">
            Weave Your Story
          </button>
        </motion.div>
      </div>
    </DigitalLoomBackground>
  );
};

export default DemoOne;