This headline is epic!

📜 Scrolling Text Box Effect for Squarespace

Copy and paste this into a Code Block inside your Squarespace site.

<!-- 🚀 Rotating Text Effect (Auto-Adapts to Squarespace Fonts) -->
<div class="rotating-text-container">
    <p class="static-text">This headline is 
        <span class="rotating-word" role="status" aria-live="polite">epic!</span>
    </p>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Sanitize words array for security
    const words = ["epic!", "tight", "gnarley 🤙", "sweet", "legit", "😎😎"]
        .map(word => word.replace(/[<>]/g, '')); // Basic XSS prevention
    
    const rotatingWord = document.querySelector(".rotating-word");
    if (!rotatingWord) return; // Guard clause
    
    let index = 0;
    let isAnimating = false; // Prevent animation overlap

    function rotateText() {
        if (isAnimating) return; // Prevent multiple animations
        isAnimating = true;

        rotatingWord.classList.add("slide-out");

        setTimeout(() => {
            index = (index + 1) % words.length;
            rotatingWord.textContent = words[index];
            rotatingWord.classList.remove("slide-out");
            rotatingWord.classList.add("slide-in");
        }, 500);

        setTimeout(() => {
            rotatingWord.classList.remove("slide-in");
            isAnimating = false;
        }, 1000);
    }

    // Use requestAnimationFrame for better performance
    let lastTime = 0;
    const interval = 2000; // 2 seconds

    function animate(currentTime) {
        if (currentTime - lastTime >= interval) {
            rotateText();
            lastTime = currentTime;
        }
        requestAnimationFrame(animate);
    }

    // Start animation
    requestAnimationFrame(animate);
});
</script>

<style>
/* 🔥 Main container */
.rotating-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 300;
    padding: 20px;
    background: white;
    color: #333;
}

/* 🔥 Static text - Automatically matches Squarespace site fonts */
.static-text {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-family: inherit;
    margin: 0;
    line-height: 1.2;
}

/* �� Rotating word with animation */
.rotating-word {
    background: #14A19D;
    color: white;
    padding: 4px 10px;
    border-radius: 8px;
    margin-left: 8px;
    display: inline-block;
    font-family: inherit;
    transition: transform 0.5s ease, opacity 0.5s ease-in-out;
}

/* 🔥 Slide-out effect */
.slide-out {
    transform: translateY(10px);
    opacity: 0;
}

/* 🔥 Slide-in effect */
.slide-in {
    transform: translateY(-10px);
    opacity: 1;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .rotating-word,
    .slide-out,
    .slide-in {
        transition: none;
    }
}
</style>

🚀 How to Customize the Scrolling Text Box Effect

These instructions will help you tweak the rotating text, colors, fonts, and animation speed to match your Squarespace site.

📝 1. Edit the Static Text

The static text is the part that remains the same. To change it, edit this line inside the  tag:

This headline is

epic!

For example, if you want it to say "My brand is", update it like this:

My brand is

epic!

🔄 2. Edit the Rotating Words

The words that rotate are stored inside this JavaScript array:

const words = ["epic!", "tight", "gnarley 🤙", "sweet", "legit", "😎😎"];

To add, remove, or replace words, simply modify this list.
For example, if you want to change the words to "modern", "sleek", "awesome", update it like this:

const words = ["modern", "sleek", "awesome"];

🎨 3. Edit the Colors

Static text color: Edit this in the CSS:

.rotating-text-container {

color: #333; /* Change this to any color */

}

Rotating word background color: Modify this:

.rotating-word {

background: #14A19D; /* Change this to any color */

}

Rotating word text color: Edit this line:

.rotating-word {

color: white; /* Change to any color */

}

🎨 4. Change the Background Color

To modify the background color, update this section in the CSS:

.rotating-text-container {

background: white; /* Change to any color */

}

Example: If you want a light gray background, change it like this:

.rotating-text-container {

background: #f8f9fa;

}

🔠 5. Change the Font (Size, Weight, Style)

This code automatically inherits your Squarespace site fonts—no need to change it manually.
However, if you want custom font styles, adjust these:

Edit the font size:

.static-text {

font-size: 2rem; /* Increase or decrease */

}

Change the font weight (boldness):

.static-text {

font-weight: 300; /* Options: 300 (light), 400 (normal), 700 (bold) */

}

Make the rotating word bolder or lighter:

.rotating-word {

font-weight: 700; /* Adjust as needed */

}

To change the font size on mobile

1. Find this code:

/* Mobile Optimization */

@media (max-width: 768px) {

.rotating-text-container {

font-size: 1.5rem; /* Adjust this value for mobile */

}

.static-text {

font-size: 1.5rem; /* Adjust this value for mobile */

}

2. Adjust the “rem” font size

For example:

For larger text: font-size: 2rem;
For even larger text: font-size: 2.5rem;
For very large text: font-size: 3rem;

You can adjust both the container and static text sizes to ensure consistency. The changing word (in the box) will automatically scale with the container's font size.

🔥 6. Adjust the Animation Speed

The words rotate every 2 seconds. To make it faster or slower, edit this in the JavaScript:

const interval = 2000; // 2 seconds

Example: To make it rotate every 1.5 seconds, change it to:

const interval = 1500;