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

STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK•STACKBITS TRICK

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

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion

Component

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

1import React from 'react';
2import { motion } from 'framer-motion';
3
4const BarricadeTape = ({
5  text,
6  delimiter,
7  rotation = -4,
8  entryFrom = 'left',
9  delay = 0,
10  duration = 2,
11  ease = 'backOut',
12  className
13}: {
14  text: string | Array<string>;
15  delimiter: string;
16  rotation?: number;
17  entryFrom?: 'left' | 'right';
18  delay?: number;
19  duration?: number;
20  ease?: string;
21  className?: string;
22}) => {
23  let sentence = '';
24  if (typeof text === 'string') sentence = Array(10).fill(text).join(delimiter);
25  else sentence = Array(10).fill(text.join(delimiter)).join(delimiter);
26
27  return (
28    <motion.div
29      initial={{
30        transform: `translateX(${entryFrom === 'left' ? '-50vw' : '50vw'}) rotateZ(${rotation}deg)`,
31        scale: 1,
32        y: -5
33      }}
34      whileInView={{
35        transform: `translateX(0) rotateZ(${rotation}deg)`,
36        y: 0,
37        scale: [1.1, 1],
38        transition: { duration, ease, delay }
39      }}
40      viewport={{ once: true }}
41      className={`text-black font-bold text-3xl md:text-5xl w-screen 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}`}
42    >
43      {sentence}
44    </motion.div>
45  );
46};
47
48export default BarricadeTape;

Usage

1<EndToEndBanner
2  text={['BUILD QUICK', 'COPY PASTE']}
3  delimiter={'•'}
4  entryFrom="right"
5  rotation={10}
6  className="bg-yellow-400 mt-2"
7/>

⭐️ Got a question or feedback?
Feel free to reach out!