43
Best model for
A clean recommendation table: task rows, with the recommended model chip landing in each row
Add the "Best model for" video component (By speed, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/best-model-for.zip?v=38251e2d69f2 and unzip it into components/best-model-for/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/best-model-for && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o best-model-for.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.Code
One file. The project download adds the fonts, skins and motion kit it runs on.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"By task"},{"value":"1","label":"By budget"},{"value":"2","label":"By speed"}]},4 {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}5]'>6 <head>7 <meta charset="UTF-8" />8 <meta name="viewport" content="width=1920, height=1080" />9 <link rel="stylesheet" href="assets/fonts/fonts.css" />10 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>11 <script src="assets/kit/motion/motion.js"></script>12 <style>13 * { margin: 0; padding: 0; box-sizing: border-box; }14 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }15 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }1617 /* ---------- library stage tokens (DESIGN.md) + this object's material ---------- */18 #stage { position: absolute; inset: 0; background: var(--stage); -webkit-font-smoothing: antialiased; }19 #stage[data-theme="light"] {20 --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink-2: #6B6B6B; --ink-3: #A3A3A3;21 --hair: rgba(0, 0, 0, 0.08); --hair-soft: rgba(0, 0, 0, 0.06);22 /* the card: light from above, a sharp contact edge and one large diffuse shadow (halved: the card is drawn at zoom 2) */23 --card-top: #FFFFFF; --card-bot: #FBFBFA;24 --card-shadow: 0 0 0 0.5px rgba(0, 0, 0, .07), 0 0.5px 1px rgba(0, 0, 0, .06), 0 12px 30px -10px rgba(0, 0, 0, .25);25 --cols-bg: rgba(0, 0, 0, .018);26 --seg-bg: rgba(0, 0, 0, .045); --seg-on: #FFFFFF;27 --seg-on-shadow: 0 0 0 0.5px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .08);28 --chip-top: #FFFFFF; --chip-bot: #F7F7F6; --chip-ring: rgba(0, 0, 0, .10);29 --chip-contact: 0 0.5px 1px rgba(0, 0, 0, .08), 0 2px 5px -2px rgba(0, 0, 0, .08);30 --chip-lift: 0 10px 20px -6px rgba(0, 0, 0, .26);31 --slot: rgba(0, 0, 0, .36); --dash: rgba(0, 0, 0, .16); --skel: rgba(0, 0, 0, .065);32 --wash: rgba(0, 0, 0, .03);33 /* the committed answer column (Riley t10: the winning column is tinted, edge to edge) */34 --band-fill: rgba(10, 10, 10, .05); --band-edge: rgba(0, 0, 0, .08);35 }36 #stage[data-theme="dark"] {37 --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink-2: #A1A1A1; --ink-3: #5E5E60;38 --hair: rgba(255, 255, 255, 0.10); --hair-soft: rgba(255, 255, 255, 0.07);39 --card-top: #1C1C1E; --card-bot: #171719;40 --card-shadow: 0 0 0 0.5px rgba(255, 255, 255, .08), inset 0 0.5px 0 rgba(255, 255, 255, .06), 0 12px 30px -10px rgba(0, 0, 0, .8);41 --cols-bg: rgba(255, 255, 255, .02);42 --seg-bg: rgba(255, 255, 255, .055); --seg-on: #3A3A3F;43 --seg-on-shadow: 0 0 0 0.5px rgba(255, 255, 255, .14), inset 0 0.5px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .5);44 --chip-top: #313135; --chip-bot: #2A2A2D; --chip-ring: rgba(255, 255, 255, .12);45 --chip-contact: inset 0 0.5px 0 rgba(255, 255, 255, .09), 0 0.5px 1px rgba(0, 0, 0, .5), 0 2px 5px -2px rgba(0, 0, 0, .5);46 --chip-lift: 0 10px 20px -6px rgba(0, 0, 0, .75);47 --slot: rgba(255, 255, 255, .30); --dash: rgba(255, 255, 255, .16); --skel: rgba(255, 255, 255, .07);48 --wash: rgba(255, 255, 255, .035);