ricursiveAI/Ripple-65B-PreviewRicursiveai

Run details

Model

ricursiveai/ripple-65b-preview

Route

OpenRouter API, one user message

Served by

GMICloud

Effort

no thinking

Limits

60 min · 131,072 output tokens (the model's limit)

Date

7 Nov 2026

Time

14 s

Size

6.8 kB

Tokens

84 in, 2,259 out

List price

$0.001 at today's price ($0.20 in / $0.60 out per M)

Paid

$0.001

Raw files: output · meta.json

Exact prompt

Make a Breakout game I can play right now with the keyboard or the mouse. Give it several levels, a score and some juice.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Breakout</title>
<style>
  :root{
    --bg:#0b0e14;
    --panel:#121821;
    --ink:#e8edf7;
    --muted:#7d8ba6;
    --accent:#4fd1c5;
    --accent2:#22d3ee;
    --glow:#4fd1c5;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{
    background:radial-gradient(1200px 800px at 50% -10%, #16233a 0%, var(--bg) 60%);
    color:var(--ink);
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
    padding:16px;
    overflow:hidden;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #wrap{position:relative;width:min(900px,100%);}
  .hud{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:0 4px 14px;
    font-size:15px;
    letter-spacing:.4px;
  }
  .hud b{color:var(--accent2);font-weight:700;}
  .level-tag{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
  #stage{
    position:relative;
    width:100%;
    background:var(--panel);
    border:1px solid #1e293b;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(79,209,197,.03);
    touch-action:none;
  }
  #play{
    position:absolute;inset:0;
    overflow:hidden;
  }
  canvas{
    display:block;
    width:100%;
    height:auto;
    image-rendering:pixelated;
    cursor:none;
  }
  .paddle{
    position:absolute;
    width:var(--pad-w,110px);
    height:14px;
    margin-left:var(--pad-l,0);
    bottom:calc(100% / var(--aspect,1.6) * .06 + 10px);
    margin-top:var(--pad-t,0);
    background:linear-gradient(180deg,#7b5cff,#22d3ee);
    border-radius:9px;
    box-shadow:0 0 18px rgba(79,209,197,.5);
    transition:background .2s;
  }
  .hit-flash{
    position:absolute;pointer-events:none;
    border-radius:50%;background:var(--accent);opacity:.55;
    animation:flash .25s ease-out forwards;
    mix-blend-mode:add;
  }
  @keyframes flash{to{transform:scale(1.8);opacity:0;}}
  #pstep{position:fixed;inset:0;display:none;z-index:20;}
  #pstep button{
    appearance:none;border:0;background:#1e293b;color:var(--ink);
    padding:12px 22px;border-radius:10px;cursor:pointer;font:inherit;font-size:16px;
    position:absolute;inset:0;margin:auto;transform:translate(-50%,-50%);
    width:220px;
  }
  #pstep button:hover{background:#2a3a5a;box-shadow:0 0 24px rgba(79,209,197,.35);}
  .hint{color:var(--muted);font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding-left:8px;}
  #end{
    position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
    justify-content:center;gap:10px;text-align:center;background:rgba(8,11,18,.82);
    backdrop-filter:blur(3px);z-index:5;padding:24px;
  }
  #end.show{display:flex;animation:fade .3s ease;}
  .card{
    background:rgba(18,24,37,.92);border:1px solid #26354f;border-radius:16px;
    padding:26px 46px;text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.65);
    animation:pop .35s cubic-bezier(.2,1.4,.5,1);
  }
  .card h2{margin:0 0 6px;font-size:30px;letter-spacing:.5px;}
  .card h3{margin:0 0 6px;font-size:22px;letter-spacing:.5px;color:var(--muted);}
  .card p{margin:0 0 18px;font-size:15px;color:var(--muted);line-height:1.6;}
  #end kbd{
    display:inline-block;background:#1b2942;border:1px solid #33507a;border-radius:6px;
    padding:2px 9px;font-size:13px;font-family:inherit;margin:0 3px;color:var(--ink);
  }
  #scoreboard{
    position:absolute;top:14px;left:0;right:0;text-align:center;color:var(--muted);
    font-size:12px;letter-spacing:2px;text-transform:uppercase;pointer-events:none;z-index:6;
  }
</style>
</head>
<body>
<div id="wrap">
  <div class="hud">
    <span>Score <b id="score">0</b></span>
    <span id="best" class="hint">BEST 0</span>
    <span class="level-tag">LEVEL 1</span>
    <span class="hint">MOVE: MOUSE / ← → / A D</span>
  </div>
  <div id="stage">
    <div id="pstep"><button id="startBtn">START</button></div>
    <div id="end">
      <div class="card" id="endCard">
        <h2 id="endTitle">BREAKOUT</h2>
        <h3 id="endSub">You win!</h3>
        <p id="endText">You cleared every level.</p>
        <button id="againBtn" style="font:inherit;padding:10px 30px;border-radius:10px;border:0;cursor:pointer;background:linear-gradient(180deg,#22d3ee,#4fd1c5);color:#04121a;font-weight:700;font-size:16px;">PLAY AGAIN</button>
      </div>
    </div>
    <div class="paddle" id="paddle"></div>
    <div id="play">
      <canvas id="game" width="900" height="600"></canvas>
      <div id="scoreboard" class="scoreboard"></div>
    </div>
  </div>
</div>
<script>
(function(){
"use strict";

const CV = document.getElementById("game");
const CTX = CV.getContext("2d");
const PADDLE = document.getElementById("paddle");
const SCORE_EL = document.getElementById("score");
const BEST_EL = document.getElementById("best");
const LEVEL_EL = document.getElementById("hud").querySelector(".level-tag");
const START_BTN = document.getElementById("startBtn");
const PSTEP = document.getElementById("pstep");
const END = document.getElementById("end");
const END_TITLE = document.getElementById("endTitle");
const END_SUB = document.getElementById("endSub");
const END_TEXT = document.getElementById("endText");
const AGAIN = document.getElementById("againBtn");

const W = CV.width, H = CV.height;
const ASPECT = W / H;

const PADDLE_W = 118;
const PADDLE_H = 15;
const BASE_SPEED = 480;
const GRAVITY = 1900;
const BALL_R = 8;
const START_BALL_SPEED = 330;

let best = parseInt(localStorage.getItem("breakout_best") || "0", 10) || 0;
BEST_EL.textContent = "BEST " + best;

const LEVELS = [
  { name:"SINGLE", rows:4, cols:9, hue:190, speedMul:1 },
  { name:"PYRAMID", rows:5, cols:9, hue:170, speedMul:1.06 },
  { name:"CHEVRON", rows:5, cols:9, hue:275, speedMul:1.12, shape:"chevron" },
  { name:"GRID", rows:6, cols:10, hue:25, speedMul:1.18, shape:"grid" },
  { name:"SPIKE", rows:7, cols:10, hue:145, speedMul:1.24, shape:"spike" },
  { name:"FINALE", rows:7, cols:11, hue:190, speedMul:1.30, shape:"pyramid" }
];

const COLORS = [
  ["#4fd1c5","#22d3ee","#2dd4bf","#67e8f9","#a7f3d0"],
  ["#f472b6","#fbcfe8","#c084fc","#e9d5ff","#fde68a"],
  ["#f97316","#fdba74","#fbbf24","#fcd34d","#fef08a"],
  ["#60a5fa","#93c5fd","#bfdbfe","#dbeafe","#eff6ff"],
  ["#f43f5e","#fb7185","#fecdd3","#fee2e2","#fda4af"]
];
const CYCLE = ["#4fd1c5","#22d3ee","#2dd4bf","#67e8f9","#a7f3d0"];

let state = "ready";   // ready | playing | dead | won
let levelIndex = 0;
let score = 0;
let bestScore = best;
let ball;
let bricks = [];
let particles = [];
let floats = [];
let screenShake = 0;
let hitFx = [];
let shakeT = 0;

let/action"

")();

})();
</script>
</body>
</html>