Repository navigation
Animated talks for every program in Part II - #278
Merged
Merged
Conversation
animations/engine.js draws a scene in the book's figure vocabulary and animates each step: accounts grow in, handlers light up, fields count to their new values, and coins ride the transfer arrows. A scene file holds only the hand-placed layout and the steps, so the screen version shares the printed figures' map. animations/options covers the venue opening, Alice writing the covered call, and Bob buying it, in the order the program's handlers do their work. scripts/animation-frames.mjs renders each step's end state to PNG and can record the whole run as a video. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The screen has no print limits, so the scene is drawn on a 1120 by 630 canvas. The extra width puts the mints beneath the one cluster curve, so the continued curve is gone; the engine draws the curve and places every public-key dot on it. Each step is headed "Step n:" with its title, its caption sits inside the frame, and colours come from one THEME. A step still holds until the next key. P (or ?autoplay) plays through, holding each finished step for three seconds, and the recording made by animation-frames.mjs --video holds the same way. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The scene now opens slowly, for an audience that has not read the earlier chapters: the network, Alice's account, a mint, her thousand dollars, her NVIDIA shares, Bob and Maria, the program, and the deal an option makes. Then it follows the chapter to the end: the call is exercised and its strike collected, Carol writes a cash-secured put that Dave buys and lets expire, and Maria collects the fees. The two futures the chapter sets aside, the call expiring unused and the put exercised, branch off with a step's `from` and the story resumes after them. Carol and Dave take Alice's and Bob's columns, as in the figures. The engine gains `hide` and `close` actions, `show` fades accounts in, and people take on a role (admin, writer, holder) when they do. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The diagrams now sit inside a slide deck modelled on the Managed Fund Keynote: a title slide, what you should know and what you'll learn, card slides between the runs of diagram steps, where everyone ended up, QR slides for the examples and the AI plugin, and the closing slide. One key advances through everything; card slides build a card at a time. The diagrams take the Keynote's palette: near-black paper, accounts as pastel cards by kind, dark slabs for faded accounts, a thin olive curve, and a centred title with its keyword on the green highlight. The step number moves to a "// STEP n" tag. deck.js and deck.css are shared; options/slides.js holds this talk's slides. The Quicknode mark comes from the Keynote file, and the QR codes are generated from the two repository URLs. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Bob now appears when he buys the call, Maria when she opens the venue (and her USDC account only when she collects the fees), Carol when she writes the put, and Dave when he buys it. The steps that introduced them in pairs are gone, the deal step and the option cards speak of "a buyer" until Bob arrives, and `show` gains `focus: "shown"` so a person arrives drawn in full. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
"Every token has a mint" now brings in the NVDAx mint beside the USDC mint and names both tokens; the NVIDIA step adds only Alice's NVDAx account. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The talk now starts from what Alice and Bob each want (Alice to be paid for waiting, Bob to buy below the market) and how an option gives both of them that, then teaches the terms (underlying, strike, expiry, premium, writer, holder), calls and puts, the two endings, a payoff chart for each side, American and European, in and out of the money, and how a trade settles, before "Now let's build it on Solana". The deck gains the Quicknode template's layouts as slide kinds (statement, versus, split, grid, numbered, chart), and takes nineteen icons from the template into assets/icons. The card slide that bridged the diagram's opening is gone, and a short statement slide replaces the call-and-put recap before the put. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The call-and-put slide in the opening is gone. "Alice's option is a call" now sits just before the step where she writes it, and the put slide carries its definition just before Carol writes one. The opening's other uses of the words (a learning goal, the payoff chart's subtitle, "in the money") no longer lean on them. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
An audit of every slide and step, in order, moved each definition to the first place the talk uses the term: - American and European, in and out of the money, now come in the exercise step and the expired-call step, not on a slide of their own well before; physical and cash settlement in the step where Bob pays the strike. - "Covered" and "collateral" are defined where Alice's shares land in the vault, and the step titles no longer say "covered call" or "cash-secured put" before that. - Vaults, the quote vault and rent are defined where Maria creates them; Listed and Held say what they mean; "signer", "margin", "oracle" and "liquidator" are gone rather than used unexplained. - The step before the venue opens no longer defines an option a second time. Each template icon now stands for one idea: Alice's income, Bob's bargain, and Maria's venue get their own, and the unused icons are gone. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
animations/managed-fund presents the chapter as the Options talk does: what Alice and Maria want and how a managed fund gives it to them, then Solana from a standing start, Victor's registry and approved assets, Pyth's price feeds, Maria creating the fund and setting its weights, Alice's deposit leg by leg through the swap router, NVIDIA's rally and the rebalance, Bob buying in at the new share price, Maria's fee minted by dilution, and Alice withdrawing in kind. Allocation slides show the 40/60 weights drifting and coming back, and who owns the shares after the fee. Steps follow finance/managed-fund's handlers, and each term is defined where the talk first needs it. The engine gains what the fund needed: transfers that replace the step's earlier arrow, transfers to and from a program with no balance, a second program's handlers lit beside the first, a call with no handler for a price moving, routed arrows through rounded waypoints, and coins placed by position. The deck gains an allocation slide. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Both talks: - The running handler sits on a full-width green band with a ▶ marker, in the program box and the router's, instead of green text alone. - An account a step moves tokens into or out of, or changes, is drawn in full before the step plays on it, so no arrow lands on a faded slab. - The Quicknode Solana Finance bar is on every slide, the diagrams and the card slides included; a diagram scales to fit beneath it. - A call no longer flashes every hidden NEW badge on as it fades out the last call's badges. - "Now let's build it on Solana" promises every handler, not every instruction. The Managed Fund talk's dilution bar draws Maria's 1% at its true width, with her label outside the bar and an arrow to it. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The cluster curve runs on along its own tangent past both ends of the canvas, so in a diagram scaled beneath the series bar it still reaches the left and right edges of the slide. The bar is 3.3cqw including its rule and is drawn above the diagram, so the curve's scene no longer covers the rule. The two closing QR slides (the examples repository and the AI plugin) become one, "Building Financial Software on Solana", whose QR code links to solanabook.org. Its bullet points are still to come. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Both talks: - A value a step changes settles on a green band, in bold, and stays marked until the next step, so the new number is easy to find once it stops counting. - A Questions slide follows "Where everyone ended up": the word on the green highlight over the Quicknode template's sky photograph, which drifts slowly closer while the slide is up. - The closing QR slide is "Building Financial Software on Solana", with the book's cover beside its bullets, and its QR code links to solanabook.org. - The follow slide is redrawn in the talks' own picture: a cluster curve draws itself across a dark dotted slide, accounts pop up along it and a coin rides it. - The step where Alice says what she wants now comes before "Programs are accounts too", which leads on into the first handler. Managed Fund talk: the NVDAx bar grows as NVIDIA rallies and the rebalance pulls both bars back to 40/60; Bob's deposit caption says the NAV comes from Pyth's prices, which is why the price feeds are in full on that step. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The first step's title is "This is Solana Devnet", and its caption is three lines: it is a global computer, all data is stored in accounts, each account has an address. Captions now keep their line breaks. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Tokens move along transfer arrows, never along the cluster curve. The closing slide keeps the curve and its accounts, and adds above them a straight green transfer arrow between two accounts off either edge, with four coins streaming along it, each hidden until its first run. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Both talks' "This is Solana Devnet" caption gains a fourth line: some addresses are public keys, others are made from seeds chosen by programmers. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Both talks' "This is Solana Devnet" caption gains a second line: financial products are programs that run on this computer. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Escrow, the Fundraiser, the Betting Market, the Order Book Exchange, the Constant-Product AMM, the Prop AMM and Perpetual Futures each get a talk built the way the Options and Managed Fund talks are: what each person wants and how the product serves them before any Solana, then the diagram from "This is Solana Devnet", people appearing when they first act, terms defined where first needed, steps in each handler's real order, the chapter's alternative futures as branches, and the shared closing slides. Each talk's own template icons carry its prefix. Closing an account now takes the step's arrows with it, so no arrow is left pointing at an account that is gone. The README lists every talk. The Lending talk follows separately. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The tenth talk, built like the others: what Alice and Bob want and how a lending market serves both, the loan terms, then the diagram from "This is Solana Devnet" through the reserves, Alice's deposit, Bob's obligation, collateral and 750 USDC loan, interest, repayment and redemptions, and Maria's fee. One future has NVIDIA fall and Dave liquidate half of Bob's loan; its amounts follow from the chapter's settings (75% loan-to-value, 80% threshold, 5% bonus, 50% close factor) applied to Bob's position, where the chapter liquidates a short seller. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
…bars
- A handler name is bold wherever it appears, and the running handler's
line is set in a face with a real bold weight: Andale Mono has none,
and a browser's made-up bold was faint.
- The steps that open another possible ending say so plainly ("It's
possible that nobody takes the offer") instead of "Another future".
- The follow slide drops the curve: the coin transfer now runs across
the lower third, beneath the handle, with the thanks under it.
- animations/index.html links to all ten talks.
- The Betting Market's payout slide opens on each bettor's stake and
moves to each payout: Carol's bar drains away as Alice's and Bob's
grow, and Maria's fee appears. Allocation parts may now move to or
from nothing, after a set delay.
- The bookmaker card shows a house, not a service bell.
Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Handler names in titles, captions and slide text go back to the weight of the words around them. The running handler's line in the program box keeps its real bold face on the green band. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
A talk's people, assets, events, order of events and numbers are its chapter's: no invented scenario, no swapped person, no number the chapter doesn't state. A balance may follow from the chapter's numbers by plain arithmetic; a minor branch may be left out, never replaced. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Each talk was checked slide by slide and step by step against its chapter and figures, and every departure fixed: invented framing and wording replaced by the chapter's (the opening panels in several talks, "escrow agent", Maria's role in the order book), claims the chapter doesn't make removed (Alice back where she started, Bob down $5, Maria building the machine), invented precision rounded back to the book's (1.521 TSLAx becomes about 1.52), fields with no stated values dropped, and events the chapter only supposes made into branches (the Prop AMM's pause). The Options payoff chart now covers only the book's own figure. Balances that follow from the chapter by plain arithmetic are marked in comments. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The name above each panel's heading was small grey mono type. It is now a "// ALICE" badge in the slides' tag style, purple on the mint panel and green on the lavender one, so it stands out from its panel. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
- The Lending talk now follows the chapter's own story: Alice supplies,
Bob borrows against NVDAx, Carol shorts SPCXx, SPCXx rallies from
$250 to $300, and Dave liquidates Carol twice ($450 repaid for $472.50
seized, then $225 for $236.25), before the interest, Bob's repayment,
Maria's fee and the redemptions. Balances that follow from the
chapter's numbers are marked in comments.
- Every alternative ending opens on a slide that names it ("Outcome 1:
nobody takes Alice's offer", "Outcome 2: Bob takes Alice's offer"),
and a return to the main story on "Back to Outcome 1: ...". The Prop
AMM's asides open on "What if ...?". The steps after those slides go
straight to what happens.
- A highlight takes the saturated form of its background's hue: green
on mint, purple on lavender; the name badges on the "versus" slides
follow it.
Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Accounts derived from the same seeds would share one address, but six groups of distinct accounts were drawn with identical seed lists. Each now names what tells them apart: the reserve for Lending's liquidity vaults and share mints, the reserve and the obligation for its collateral vaults, the order ID (1, 2, 3) for the order book's orders, and the index (0, 1) for the betting market's outcomes and the managed fund's asset configs, as the programs derive them. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
Same seeds are the same address. The engine refuses a scene that repeats a seed list, the linter flags a figure that does, and the 28 figures that did now name the index, order ID or reserve that tells their accounts apart. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The signature glyph it shared with the options contract read as a scribble. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The signature glyph didn't read as anything. The template has no sealed document, so this one is drawn at the template's stroke weight. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
The talks are being recorded for YouTube, where nobody asks questions. Revert this commit to bring the slide back for a live talk. Claude-Session: https://claude.ai/code/session_01WYmaiRBLD1HuvuRtuQLWmZ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
animations/: a key-stepped, animated talk for each of the ten programs in Part II, drawn in the book's figure vocabulary, and a rule that no two derived accounts share a seed list.The talks
Open
animations/index.htmlto reach all ten, or a talk's ownindex.html. They run from disk, with no build step and no server.escrow/fundraiser/betting-market/order-book/constant-product-amm/prop-amm/lending/managed-fund/options/perpetual-futures/engine.jsdraws a scene's accounts on a 16:9 canvas and animates each step:Each step's end state is computed by replaying its actions, so going back or jumping lands on the same picture.
deck.js/deck.csswrap the diagrams in slides styled after the Quicknode Solana Finance Keynote.The talks match their chapters: the same people, assets, events, order of events and numbers. Steps follow each handler's real order in
quicknode/solana-program-examples.People and terms appear when needed: a person appears when they first act, and a term is defined where it is first needed.
Alternative endings each open on an "Outcome n" title slide.
scripts/animation-frames.mjs <talk>renders each step to PNG; with--videoit records the talk as webm.No Questions slide. The talks are being recorded for YouTube, so deea7b3 drops it. Revert that commit to bring it back for a live talk.
animations/README.mddocuments the engine, the slide kinds and the rules.Unique seeds
Two derived accounts with the same seeds are one address, so a figure or scene that draws two is wrong.
engine.jsrefuses to play a scene that repeats a seed list.scripts/lint-manuscript.mjsflags a figure that repeats one.The matching rule for the companion plugin is in quicknode/solana-finance-claude-plugin#92.
Checks
npm run lintis clean. I confirmed the new seed check fails on a deliberately repeated seed list.scripts/animation-frames.mjswithout errors.node scripts/check-figure-geometry.mjsandnpm run build-pdf-digitalcould not run in the session that made this: the licensed Denim INK fonts are not in it.Generated by Claude Code