JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Webpage Title</title>
    <!-- Add any additional CSS styles if needed -->
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            overflow: hidden; /* to prevent scrollbars for the demo */
            cursor: none; /* hide the default cursor */
        }

        h1 {
            text-align: center;
            margin-top: 50px;
        }

        #character {
            /* Add styles to control the size of the animated area */
            width: 500px;
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    
    <script type="module">
        import { characterCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";

        document.addEventListener('DOMContentLoaded', function() {
            const targetElement = document.querySelector("#character");
            new characterCursor({
                element: targetElement,
                characters: ["u", "s", "e", "r", "-", "9", "8", "5"],
                font: "30px serif", // Increase the font size
                colors: ["#6622CC", "#A755C2", "#B07C9E", "#B59194", "#D2A1B8"],
                characterLifeSpanFunction: function() {
                    return Math.floor(Math.random() * 60 + 80);
                },
                initialCharacterVelocityFunction: function() {
                    return {
                        x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
                        y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
                    };
                },
                characterVelocityChangeFunctions: {
                    x_func: function(age, lifeSpan) {
                        return...