Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
No preview image available
New

Author: dizzyy
Category: >:[
Created: May 12, 2026
New
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
/* --- THE PREDATORY ALIEN CAT (MOUSE FOLLOWER) --- */
@import url('https://googleapis.com');

:root {
    --alien-neon: #a2ff00;
    --mystic-pink: #ff00ff;
    --void-black: #0d0216;
}

body {
    background-color: var(--void-black) !important;
    cursor: url('https://cursors-4u.net'), auto !important; /* Crystal-style cursor */
}

/* The Cat Container */
#cat-follower {
    position: fixed;
    pointer-events: none; /* Allows you to click through the cat */
    z-index: 9999;
    transition: transform 0.2s ease-out; /* Smooth movement */
    filter: drop-shadow(0 0 15px var(--alien-neon));
}

.cat-body {
    font-size: 3.5rem;
    animation: floating-wiggle 3s ease-in-out infinite;
}

.cat-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    background: var(--alien-neon);
    color: var(--void-black);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: bold;
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes floating-wiggle {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.1); }
}

/* Fallback: If JS is disabled, the cat stays in the corner but wiggles */
#cat-follower {
    left: 20px;
    bottom: 20px;
}

/* --- BLOG STYLING --- */
.table-section, .blurbs, .module {
    background: rgba(45, 27, 78, 0.6) !important;
    border: 2px solid var(--mystic-pink) !important;
    border-radius: 40px 5px !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.1) !important;
    color: #d1c4e9 !important;
}

h1 {
    font-family: 'Cinzel', serif !important;
    text-align: center;
    background: linear-gradient(var(--alien-neon), var(--mystic-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

<!-- THE ALIEN CAT -->
<div id="cat-follower">
    <div class="cat-bubble">TARGET ACQUIRED 🛸</div>
    <div class="cat-body">🐱‍🚀</div>
</div>

<script>
// The Magic Script to move the cat
const cat = document.getElementById('cat-follower');
document.addEventListener('mousemove', (e) => {
    // Offset slightly so the cat doesn't cover the cursor
    const x = e.clientX + 20;
    const y = e.clientY + 20;
    cat.style.left = x + 'px';
    cat.style.top = y + 'px';
});
</script>

<div style="text-align: center; padding-top: 50px;">
    <h1>COSMIC CAULDRON</h1>
    <p style="color: var(--alien-neon); font-family: 'Cinzel';">THE CAT IS TRACKING YOUR SIGNAL...</p>
</div></style>