StackBits - React UI & Full-Stack Code Library

Components > Barricade Tape

Barricade Tape

BarricadeTape is a bold, no-nonsense banner that slides in like crime scene tape, making sure your message can’t be ignored. Whether it’s a warning, an alert, or just some dev humor, this tape grabs attention and doesn’t let go. It swoops in smoothly when in view—because important messages deserve a grand entrance.

Preview

Scroll to see the tape

CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS • CRIME SCENE • DO NOT CROSS

BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE • BUILD QUICK • COPY PASTE

Stackbits • Stackbits • Stackbits • Stackbits • Stackbits • Stackbits • Stackbits • Stackbits • Stackbits • Stackbits

GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻 • GET IT NOW 👇🏻

Install dependencies

npm i framer-motion tailwindcss tailwind-merge clsx

Utility function

Create a file lib/utils.ts and paste this code

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Component

Create a file barricade-tape.tsx in your components folder and paste this code

import React from 'react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

const BarricadeTape = ({
  text,
  delimiter,
  rotation = -4,
  entryFrom = 'left',
  delay = 0,
  duration = 2,
  ease = 'backOut',
  className
}: {
  text: string | Array<string>;
  delimiter: string;
  rotation?: number;
  entryFrom?: 'left' | 'right';
  delay?: number;
  duration?: number;
  ease?: string;
  className?: string;
}) => {
  let sentence = '';
  if (typeof text === 'string') {
    sentence = Array(10)
      .fill(text)
      .map((item) => ` ${item} `)
      .join(delimiter);
  } else {
    sentence = Array(10)
      .fill(text.map((item) => ` ${item} `).join(delimiter))
      .join(delimiter);
  }

  return (
    <motion.div
      initial={{
        transform: `translateX(${
          entryFrom === 'left' ? '-100vw' : '100vw'
        }) rotateZ(${rotation}deg)`,
        scale: 1,
        y: -5
      }}
      whileInView={{
        transform: `translateX(0) rotateZ(${rotation}deg)`,
        y: 0,
        scale: [1.1, 1],
        transition: { duration, ease, delay }
      }}
      viewport={{ once: true }}
      className={cn(
        'text-black font-bold text-3xl md:text-5xl w-[100vw+100vw] flex items-center justify-center gap-5 h-[50px] md:h-[80px] bg-yellow-500 overflow-hidden whitespace-nowrap border-[5px] md:border-[10px] border-black border-dashed',
        className
      )}
    >
      {sentence}
    </motion.div>
  );
};

export default BarricadeTape;

Usage

import React from 'react';
import BarricadeTape from './ui/barricade-tape';

const BarricadeTapeDemo = () => {
  return (
    <div className="w-full relative h-[500px]">
      <div className="overflow-y-auto overflow-x-hidden w-full flex flex-col gap-5 items-center justify-start h-[1200px]">
        <div className="h-[500px] flex items-center justify-center text-5xl font-bold">
          Scroll to see the tape
        </div>
        <BarricadeTape
          text={['CRIME SCENE', 'DO NOT CROSS']}
          delimiter={'•'}
          rotation={2}
          delay={0.5}
        />
        <BarricadeTape
          text={['BUILD QUICK', 'COPY PASTE']}
          delimiter={'•'}
          entryFrom="right"
          rotation={-2}
          className="bg-green-400"
          delay={0.5}
        />
        <BarricadeTape
          text={['Stackbits']}
          delimiter={'•'}
          entryFrom="right"
          rotation={2}
          className="bg-orange-400 mt-10"
        />
        <BarricadeTape
          text={['GET IT NOW 👇🏻']}
          delimiter={'•'}
          entryFrom="left"
          rotation={-5}
          className="bg-white mt-10"
        />
        <div className="h-[150px] mt-10 w-full"></div>
      </div>
    </div>
  );
};

export default BarricadeTapeDemo;