Save time building landing page pages and articles. Ask AI to output html, css, and javascript according to your specifications.

Powered by a state-of-the-art AI models.

AI Website Builder

Advanced

Improve Claude's intelligence score from 49 to 57

Enable Claude extended thinking

Set a limit on the number of tokens Claude can use for extended thinking. Claude is unlikely to use more than 30,000 even if you set this higher.

Claude thinking budget (in tokens)

AI model

i47 💰:2.0

i57 💰:36.0

🏆 i65 💰:100.0

i63 💰:50.0

i61 💰:75.0

i30 💰:1.0

i58 💰:50.0

i54 💰:50.0

i56 💰:48.0

i48 💰:11.25

i55 💰:37.5

i52 💰:35.0

i40 💰:5.0

i49 💰:50.0

i51 💰:30.0

i43 💰:37.5

i34 💰:10.0

i44 💰:25.0

i18 💰:1.0

i29 💰:1.5

i38 💰:37.5

i33 💰:37.5

i42 💰:187.5

i36 💰:187.5

i37 💰:11.0

i39 💰:100.0

i28 💰:150.0

i20 💰:4.0

i23 💰:20.0

i16 💰:25.0

i13 💰:1.5

Generate privately

Your website request

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Intelligence: +2

Intelligence: +3

Upload a screenshot of a website you like. The AI will try to match the style.

Reference website image

System Message

Website Builder

Generated Websites

Here's a fully complete web app as a single HTML file, incorporating a side-scrolling game with word...

Answers to: Write me a fully complete web app as a single HTML file. The app should contain a simple side-scrolling game where I use WASD to move around. When moving around the world, occasionally the character/sprite will encounter words. When a word is encountered, the player must correctly type the word as fast as possible.The faster the word is successfully typed, the more point the player gets. We should have a counter in the top-right to keep track of points. Words should be random and highly variable to keep the game interesting.

You should make the website very aesthetic and use Tailwind.

Here's a fully complete web app as a single HTML file, incorporating a side-scrolling game with word typing challenges, using Tailwind for styling:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Racer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes scroll {
            0% { background-position: 0 0; }
            100% { background-position: -1000px 0; }
        }
        #game-container {
            animation: scroll 20s linear infinite;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="400" viewBox="0 0 1000 400"><rect width="1000" height="400" fill="%23a7f3d0"/><path d="M0,400 Q250,300 500,400 T1000,400" fill="%2334d399"/></svg>');
        }
    </style>
</head>
<body class="bg-green-100 h-screen flex flex-col items-center justify-center">
    <div class="w-full max-w-4xl bg-white rounded-lg shadow-xl p-6">
        <h1 class="text-4xl font-bold text-center text-green-600 mb-4">Word Racer</h1>
        <div id="game-container" class="h-96 relative overflow-hidden rounded-lg">
            <div id="player" class="absolute w-8 h-8 bg-blue-500 rounded-full transition-all duration-200"></div>
            <div id="word" class="absolute hidden font-bold text-xl bg-white px-2 py-1 rounded"></div>
        </div>
        <div class="mt-4 flex justify-between items-center">
            <input type="text" id="word-input" class="w-2/3 px-4 py-2 border rounded" placeholder="Type the word here..." disabled>
            <div id="score" class="text-2xl font-bold text-green-600">Score: 0</div>
        </div>
    </div>

    <script>
        const player = document.getElementById('player');
        const wordElement = document.getElementById('word');
        const wordInput = document.getElementById('word-input');
        const scoreElement = document.getElementById('score');
        const gameContainer = document.getElementById('game-container');

        let playerX = 20;
        let playerY = 180;
        let score = 0;
        let currentWord = '';
        let wordStartTime;

        const words = ['javascript', 'python', 'html', 'css', 'tailwind', 'react', 'vue', 'angular', 'nodejs', 'express', 'mongodb', 'sql', 'api', 'frontend', 'backend', 'fullstack', 'developer', 'programming', 'algorithm', 'database'];

        function updatePlayerPosition() {
            player.style.left = `${playerX}px`;
            player.style.top = `${playerY}px`;
        }

        function showWord() {
            currentWord = words[Math.floor(Math.random() * words.length)];
            wordElement.textContent = currentWord;
            wordElement.style.left = `${Math.random() * (gameContainer.clientWidth - 100)}px`;
            wordElement.style.top = `${Math.random() * (gameContainer.clientHeight - 30)}px`;
            wordElement.classList.remove('hidden');
            wordInput.disabled = false;
            wordInput.value = '';
            wordInput.focus();
            wordStartTime = Date.now();
        }

        function hideWord() {
            wordElement.classList.add('hidden');
            wordInput.disabled = true;
        }

        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'w': playerY = Math.max(0, playerY - 10); break;
                case 's': playerY = Math.min(gameContainer.clientHeight - 32, playerY + 10); break;
                case 'a': playerX = Math.max(0, playerX - 10); break;
                case 'd': playerX = Math.min(gameContainer.clientWidth - 32, playerX + 10); break;
            }
            updatePlayerPosition();

            if (Math.abs(playerX - parseInt(wordElement.style.left)) < 50 && Math.abs(playerY - parseInt(wordElement.style.top)) < 50) {
                showWord();
            }
        });

        wordInput.addEventListener('input', () => {
            if (wordInput.value === currentWord) {
                const timeTaken = (Date.now() - wordStartTime) / 1000;
                const pointsEarned = Math.max(1, Math.floor(10 - timeTaken));
                score += pointsEarned;
                scoreElement.textContent = `Score: ${score}`;
                hideWord();
            }
        });

        updatePlayerPosition();
        setInterval(() => {
            if (wordElement.classList.contains('hidden') && Math.random() < 0.02) {
                showWord();
            }
        }, 1000);
    </script>
</body>
</html>
```

This web app creates a side-scrolling game called "Word Racer" with the following features:

1. Use WASD keys to move the player (blue circle) around.
2. Words appear randomly on the screen.
3. When the player comes close to a word, it becomes active, and the input field is enabled.
4. Type the word correctly to earn points. The faster you type, the more points you earn.
5. The score is displayed in the top-right corner.
6. The game has an infinite scrolling background created using SVG and CSS animations.
7. The design is aesthetic and uses Tailwind CSS for styling.

To play the game, simply save this HTML content to a file with a .html extension and open it in a web browser. Use the WASD keys to move around and type the words that appear as quickly as possible to earn points.

Here's a fully complete web app as a single HTML file, incorporating a side-scrolling game with word typing challenges, using Tailwind for styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Racer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes scroll {
            0% { background-position: 0 0; }
            100% { background-position: -1000px 0; }
        }
        #game-container {
            animation: scroll 20s linear infinite;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="400" viewBox="0 0 1000 400"><rect width="1000" height="400" fill="%23a7f3d0"/><path d="M0,400 Q250,300 500,400 T1000,400" fill="%2334d399"/></svg>');
        }
    </style>
</head>
<body class="bg-green-100 h-screen flex flex-col items-center justify-center">
    <div class="w-full max-w-4xl bg-white rounded-lg shadow-xl p-6">
        <h1 class="text-4xl font-bold text-center text-green-600 mb-4">Word Racer</h1>
        <div id="game-container" class="h-96 relative overflow-hidden rounded-lg">
            <div id="player" class="absolute w-8 h-8 bg-blue-500 rounded-full transition-all duration-200"></div>
            <div id="word" class="absolute hidden font-bold text-xl bg-white px-2 py-1 rounded"></div>
        </div>
        <div class="mt-4 flex justify-between items-center">
            <input type="text" id="word-input" class="w-2/3 px-4 py-2 border rounded" placeholder="Type the word here..." disabled>
            <div id="score" class="text-2xl font-bold text-green-600">Score: 0</div>
        </div>
    </div>

    <script>
        const player = document.getElementById('player');
        const wordElement = document.getElementById('word');
        const wordInput = document.getElementById('word-input');
        const scoreElement = document.getElementById('score');
        const gameContainer = document.getElementById('game-container');

        let playerX = 20;
        let playerY = 180;
        let score = 0;
        let currentWord = '';
        let wordStartTime;

        const words = ['javascript', 'python', 'html', 'css', 'tailwind', 'react', 'vue', 'angular', 'nodejs', 'express', 'mongodb', 'sql', 'api', 'frontend', 'backend', 'fullstack', 'developer', 'programming', 'algorithm', 'database'];

        function updatePlayerPosition() {
            player.style.left = `${playerX}px`;
            player.style.top = `${playerY}px`;
        }

        function showWord() {
            currentWord = words[Math.floor(Math.random() * words.length)];
            wordElement.textContent = currentWord;
            wordElement.style.left = `${Math.random() * (gameContainer.clientWidth - 100)}px`;
            wordElement.style.top = `${Math.random() * (gameContainer.clientHeight - 30)}px`;
            wordElement.classList.remove('hidden');
            wordInput.disabled = false;
            wordInput.value = '';
            wordInput.focus();
            wordStartTime = Date.now();
        }

        function hideWord() {
            wordElement.classList.add('hidden');
            wordInput.disabled = true;
        }

        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'w': playerY = Math.max(0, playerY - 10); break;
                case 's': playerY = Math.min(gameContainer.clientHeight - 32, playerY + 10); break;
                case 'a': playerX = Math.max(0, playerX - 10); break;
                case 'd': playerX = Math.min(gameContainer.clientWidth - 32, playerX + 10); break;
            }
            updatePlayerPosition();

            if (Math.abs(playerX - parseInt(wordElement.style.left)) < 50 && Math.abs(playerY - parseInt(wordElement.style.top)) < 50) {
                showWord();
            }
        });

        wordInput.addEventListener('input', () => {
            if (wordInput.value === currentWord) {
                const timeTaken = (Date.now() - wordStartTime) / 1000;
                const pointsEarned = Math.max(1, Math.floor(10 - timeTaken));
                score += pointsEarned;
                scoreElement.textContent = `Score: ${score}`;
                hideWord();
            }
        });

        updatePlayerPosition();
        setInterval(() => {
            if (wordElement.classList.contains('hidden') && Math.random() < 0.02) {
                showWord();
            }
        }, 1000);
    </script>
</body>
</html>

Write me a fully complete web app as a single HTML file. The app should contain a simple side-scrolling game where I use WASD to move around. When moving around the world, occasionally the character/sprite will encounter words. When a word is encountered, the player must correctly type the word as fast as possible.The faster the word is successfully typed, the more point the player gets. We should have a counter in the top-right to keep track of points. Words should be random and highly variable to keep the game interesting.

You should make the website very aesthetic and use Tailwind..html

This web app creates a side-scrolling game called "Word Racer" with the following features:

1. Use WASD keys to move the player (blue circle) around.
2. Words appear randomly on the screen.
3. When the player comes close to a word, it becomes active, and the input field is enabled.
4. Type the word correctly to earn points. The faster you type, the more points you earn.
5. The score is displayed in the top-right corner.
6. The game has an infinite scrolling background created using SVG and CSS animations.
7. The design is aesthetic and uses Tailwind CSS for styling.

To play the game, simply save this HTML content to a file with a .html extension and open it in a web browser. Use the WASD keys to move around and type the words that appear as quickly as possible to earn points.

Generated Websites

Request another