AI Spreadsheet Formula

About this style

Spreadsheet makers have introduced AI in the form their users already know: a formula. Typing an AI function into one cell and filling it down a column lets a model classify, extract or estimate row by row, while the results stay in the grid where they can be checked, sorted and charted. Demos of these features tend to follow three beats: the formula is typed in plain language, the column fills faster than a person could, and a chart turns the new column into an answer. The format is convincing when the data looks like a real team's working sheet, the formula stays readable and the totals reconcile with the rows above them.

Make a 10-second AI spreadsheet demo on a dark grid: an AI formula is typed into the first Forecast cell, it fills the column for twelve sales reps faster than anyone could, and a bar chart grows out of the new column row by row.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Gridlark, a spreadsheet with AI formulas (fictional). Wordmark: "gridlark".
- File: "Q4 Pipeline · West"; sheet tabs "Reps" (active), "Accounts", "+".
- Columns: A Rep · B Region · C Open deals · D Pipeline · E Win rate · F Forecast (with a four-point star after the header, drawn as a path, not a font glyph).
- Rows 2–13 (rep · region · open deals · pipeline · win rate · forecast):
  Ana Whitlock · Seattle · 14 · $412,000 · 32% · $131,840
  Bo Castellanos · Portland · 9 · $288,500 · 28% · $80,780
  Chidi Mensah · Oakland · 17 · $530,000 · 35% · $185,500
  Dalia Rosen · San Jose · 11 · $346,000 · 30% · $103,800
  Eamon Price · Sacramento · 6 · $174,000 · 22% · $38,280
  Farah Siddiqui · Boise · 8 · $225,000 · 26% · $58,500
  Gus Lindqvist · Reno · 5 · $141,500 · 24% · $33,960
  Hana Kobayashi · Los Angeles · 19 · $618,000 · 34% · $210,120
  Ivo Petrov · San Diego · 12 · $389,000 · 29% · $112,810
  Jules Ortega · Phoenix · 10 · $301,000 · 27% · $81,270
  Kemi Adeyemi · Denver · 13 · $402,500 · 31% · $124,775
  Lars Brennan · Salt Lake City · 7 · $196,000 · 25% · $49,000
- Row 14, "Total": 131 · $4,023,500 · 30.1% (weighted: forecast ÷ pipeline) · $1,210,635.
- Formula, in F2: =AI.FORECAST(D2:E13, "Q4 bookings by rep")
- Autocomplete rows: "AI.FORECAST(range, goal) · estimates a value for each row", "AI.CLASSIFY(range, labels) · sorts each row into a label", "AI.EXTRACT(range, field) · pulls a field out of text".
- Chart card: title "Q4 forecast by rep", subtitle "$1.21M of $4.02M pipeline".
- Explanation chip: "Pipeline × win rate · 12 rows · 0.9 s".
- Tooltip: "Hana Kobayashi" over "$210,120 · 34% of $618,000".
- End lockup: "gridlark" with "Ask your sheet. Keep the formula."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a dense, serious, dark spreadsheet a revenue team actually works in: a crisp 1px grid, tight type, lots of real numbers. The AI owns one accent color, chartreuse, and it appears only on what the AI touched: the function name, the filled column's tint and the chart's bars. Everything else is graphite and off-white. It feels fast and exact, like good keyboard software, not magical.
- Palette: app #121316; sheet surface #17191C; header cells #1E2024; grid lines #2A2D32; faint row guides #1F2226; text #E6E7E9; secondary #8A8F98; faint #5B6069; AI chartreuse #C5F06A; AI tint #C5F06A at 9% (filled cells); range sky #79B8F2 (the D2:E13 outline at 2px with an 8% fill, and its token in the formula); string apricot #F2B47E; total row #1B1D21 with a 1px #3A3E45 rule on top; popover and tooltip #262A30 with a 1px #34383F border. Bars are chartreuse with a 1px #E3FFA8 top edge. No glow on anything.
- Type: Geist 400, 500 and 600 for UI and text cells (cells 17px, column headers 14px 500 secondary, chart labels 15px, wordmark 20px 600); Geist Mono 400 and 500 for the formula bar (19px) and every number (17px, right-aligned with 14px cell padding).
- Layout (Canvas 1920 × 1080):
  - Top bar y 0–56, #17191C: the mark at x 28 (an 18px chartreuse rounded square with a 2 × 2 grid knocked out of it) and "gridlark"; "Q4 Pipeline · West" Geist 500 16px at x 200; at the right three 28px initials avatars ("AW", "HK", "LB" on #4A5560, #5C5446 and #4F5E4A) and a "Share" button (1px border, radius 8).
  - Formula bar y 64–112: the name box at x 24–112 showing the active cell, a 1px divider, "fx" in italic secondary at x 132, the formula from x 172.
  - Grid: column letters A–H at y 124–156 (G and H empty and dim), row numbers at x 24–72. Columns: A x 72–332, B 332–520, C 520–640, D 640–840, E 840–970, F 970–1180. Row 1 (field names, Geist 500 15px) y 156–204; rows 2–13 y 204–828 (52px each); row 14 (Total, Geist 600) y 828–880; empty rows 15–17 y 880–1036; the sheet tab bar y 1040–1080.
  - Chart card x 1212–1888, y 148–890, #17191C, 1px #2A2D32 border, radius 12: title Geist 600 18px at x 1240, baseline y 178; subtitle Geist 400 14px secondary at baseline y 198. Its bars sit on the sheet's own rows: one bar per data row, 24px tall, centered in that row's band, starting at x 1240 on a 1px #2A2D32 baseline running y 204–828; length = forecast ÷ $210,120 × 500px, so Hana's bar is 500px; each value in Geist Mono 15px 12px after its bar's end. The faint row guides continue across the card so every bar visibly belongs to its row. On row 14: a 2px chartreuse tick at x 1240 and "Total $1,210,635" in Geist Mono 500 15px. The explanation chip at x 1240, y 842–874: a #262A30 pill with a small chartreuse star, Geist 500 14px.
- Typing: F2 and the formula bar type in sync at 26 characters per second behind a 2px caret, syntax-colored as they go: "=", "(", "," and ")" in secondary, "AI.FORECAST" in chartreuse, "D2:E13" in sky, the quoted string in apricot. When "=AI." is complete an autocomplete popover drops under F2 (x 970–1440, y 256–356, radius 8, a soft shadow) with its three rows, the first highlighted with the AI tint; it closes when "(" is typed. When "D2:E13" is complete its range outline appears on the grid.
- The fill: on Enter, F2's border pulses once (scale 1.0 to 1.03 and back, 0.15 s) and the range outline fades. Each F cell first shows a shimmer bar (60% of the cell's width, 10px tall, AI tint, a lighter band sliding across once in 0.12 s), then its number settles in (digits roll up 8px into place over 0.18 s, easeOutCubic) and the cell keeps the AI tint. Cells start 75 ms apart, F2 to F13. Then F14's sum rolls in and E14's 30.1% appears. F2:F13 stays selected: a 2px chartreuse outline with a 7px square fill handle at its bottom-right corner.
- The chart grows out of the column: as each F cell finishes, a 10 × 10 chartreuse chip leaves the cell's right edge and slides along its row to x 1240 (0.22 s, easeInCubic); the bar grows from there to its length (0.4 s, easeOutBack 1.3) and its value counts up with it.
- The cursor appears only at the end: an original arrow drawn on the canvas, 24px, #E6E7E9 with a 2px #121316 outline.
- Motion rules: everything is fast and exact, 0.15–0.25 s on easeOutCubic; nothing floats, wobbles or glows; the bars' easeOutBack is the only overshoot.
- Premium: dense, legible data with right-aligned tabular numbers that multiply out, one accent used only for AI output, a chart visibly made of the column's own values. Cheap: sparkles and particles, a rainbow of colors, rounded bubbly cells, a chart that appears from nowhere, numbers that don't add up.
- Banned: real company names, logos and UI copied from existing products (no clone of any real spreadsheet's toolbar, ribbon or icons), green-on-black hacker styling, glows, particles, sparkle bursts, purple gradients, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the sheet's rows fade in top to bottom (row by row, 30 ms apart, 0.2 s each) with columns A–E filled and F empty under its header; the chart card fades in with its title, baseline and row guides.
- 0.5–0.75s: the selection glides from A1 to F2 (0.2 s, easeOutCubic); the name box reads F2.
- 0.8–2.42s: the formula types (42 characters); the popover is open from about 0.95 s to 1.3 s; the D2:E13 outline appears at about 1.53 s.
- 2.45–2.6s: Enter: F2's pulse; the range outline fades.
- 2.6–3.75s: F2 to F13 fill, starting 2.6 s plus 75 ms per row; each shimmers for 0.12 s and settles in 0.18 s.
- 2.9–4.35s: the bars spring out row by row, each starting as its cell finishes.
- 3.6–3.9s: the Total row's F14 rolls to $1,210,635 and E14 shows 30.1%.
- 4.3–4.8s: the subtitle types at 55 characters per second; the explanation chip rises 8px and fades in; F2:F13 shows its selection outline.
- 4.9–5.6s: the cursor enters from (1900, 700) and comes to rest on Hana's bar at (1650, 594), arriving at 5.45 s; the bar gains a 1px #E6E7E9 outline; the tooltip appears at 5.55 s above the bar's end, right-aligned to x 1860 (Geist 600 15px over Geist Mono 14px).
- 6.0s: the hero frame: the complete sheet with the Forecast column filled and tinted, the formula in the bar, the totals, the full chart with all twelve values and the total, the chip, and the tooltip on Hana's bar.
- 6.8–7.3s: the tooltip fades and the cursor slides out to the right.
- 7.3–7.9s: the end lockup rises 12px and fades in over the empty rows: the mark and "gridlark" in Geist 600 40px at x 96, baseline y 976, and "Ask your sheet. Keep the formula." Geist 400 22px secondary at x 360 on the same baseline.
- 7.9–10.0s: hold on the final frame: the filled sheet, the chart and the lockup.
For other lengths, stretch the typing pause after Enter and the gap before the tooltip; keep the typing at 26 characters per second, the fill at 75 ms per row and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and icon is drawn in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face (Geist 400, 500 and 600; Geist Mono 400 and 500) before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Snap 1px grid lines to half pixels so they stay crisp. The state at any t (characters typed, which cells are filled, each bar's length) comes from one timed script, and the cell values come from the table in the inputs, never from arithmetic done at draw time that could round differently.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the formula reads exactly =AI.FORECAST(D2:E13, "Q4 bookings by rep") with its token colors; every Forecast value equals its row's pipeline × win rate exactly as listed; F14 reads $1,210,635 and E14 30.1%; every bar sits inside its own row band and Hana's is the longest at 500px; no value label runs past the chart card; chartreuse appears only on AI output; the 6.0 s frame shows the full sheet, the full chart and the tooltip; and the final frame shows the lockup over the empty rows without touching row 14. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…