{"name":"Kaki by Shojum — catalogue data","description":"Machine-readable export of Kaki's curated interface-study catalogue: original editorial studies and verified third-party inspirations, each with disclosed authorship, sourcing, and licensing.","homepage":"https://shojum.com/kaki","catalogue":"https://shojum.com/kaki/explore","generatedAt":"2026-09-06T13:44:29.509Z","recordCount":28,"records":[{"slug":"night-ferry","accession":"K–STUDY–001","title":"Night Ferry","description":"A quiet mobile journey planner built from invented routes and times.","format":"Mobile","primaryKind":"Inspiration","mediaType":"Interface still","editorialDepth":"Case study","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Navigation","Dark UI","State"],"curatedBy":"Shojum","technology":"CSS-built prototype screens","screenCount":3,"live":{"available":false,"label":"Unavailable"},"download":{"available":false,"label":"None"},"curatorNote":"The sequence is included for its calm handling of time, route, and state after dark.","url":"https://shojum.com/kaki/design/night-ferry","dateModified":null},{"slug":"margin-index","accession":"K–STUDY–002","title":"Margin Index","description":"An archive concept where annotations become navigation.","format":"Web","primaryKind":"Inspiration","mediaType":"Interface still","editorialDepth":"Quick record","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Editorial","Archive","Type"],"curatedBy":"Shojum","screenCount":2,"live":{"available":false,"label":"Unavailable"},"download":{"available":false,"label":"None"},"curatorNote":"The margin acts as a second voice: quiet, useful, and always attached to its source.","url":null,"dateModified":null},{"slug":"soft-ledger","accession":"K–STUDY–003","title":"Soft Ledger","description":"A household-resource dashboard using clearly fictional sample data.","format":"Dashboard","primaryKind":"Inspiration","mediaType":"Interface still","editorialDepth":"Quick record","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Data","System","Sample"],"curatedBy":"Shojum","screenCount":3,"live":{"available":false,"label":"Unavailable"},"download":{"available":false,"label":"None"},"curatorNote":"The hierarchy stays gentle even when the information becomes dense.","url":null,"dateModified":null},{"slug":"interval-no-03","accession":"K–STUDY–004","title":"Interval No. 03","description":"An internal Kaki motion study recorded as three static timing states.","format":"Animation","primaryKind":"Recreation","mediaType":"Motion","editorialDepth":"Quick record","authorship":"recreation","authorshipLabel":"Kaki recreation","tags":["Motion","Timing","Type"],"techniques":["Timing states","Type transition"],"curatedBy":"Shojum","screenCount":3,"live":{"available":false,"label":"Not connected"},"download":{"available":false,"label":"None"},"curatorNote":"Three still states describe the intended rhythm without implying that a live preview exists.","url":null,"dateModified":null},{"slug":"commonplace","accession":"K–STUDY–005","title":"Commonplace","description":"A reading and annotation interface for returning to a thought.","format":"Web","primaryKind":"Inspiration","mediaType":"Interface still","editorialDepth":"Quick record","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Reading","Notes","Editorial"],"curatedBy":"Shojum","screenCount":2,"live":{"available":false,"label":"Unavailable"},"download":{"available":false,"label":"None"},"curatorNote":"Reading and annotation share one surface without competing for attention.","url":null,"dateModified":null},{"slug":"fold-unfold","accession":"K–STUDY–006","title":"Fold / Unfold","description":"An expandable-navigation study about reveal and return.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Quick record","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Navigation","Reveal","State"],"techniques":["Disclosure","State transition"],"curatedBy":"Shojum","screenCount":3,"live":{"available":false,"label":"Not connected"},"download":{"available":false,"label":"None"},"curatorNote":"The menu is treated as spatial choreography: an opening should also explain how to return.","url":null,"dateModified":null},{"slug":"weather-shelf","accession":"K–STUDY–007","title":"Weather Shelf","description":"An ambient forecast layout using fictional sample conditions.","format":"Web","primaryKind":"Inspiration","mediaType":"Interface still","editorialDepth":"Quick record","authorship":"original_kaki","authorshipLabel":"Original Kaki study","tags":["Weather","Ambient","Sample"],"curatedBy":"Shojum","screenCount":2,"live":{"available":false,"label":"Unavailable"},"download":{"available":false,"label":"None"},"curatorNote":"A forecast can feel atmospheric while still making its sample-data boundary explicit.","url":null,"dateModified":null},{"slug":"sticker-forge","accession":"K–INSP–001","title":"Sticker Forge","description":"A browser-based text and image sticker maker with unusually tactile peel motion.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Case study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Motion","Creative tool","Materiality","Stickers"],"techniques":["WebGL","Direct manipulation","Material simulation","Velocity-responsive sound"],"curatedBy":"Shojum","curatedDate":"2026-08-04","curatedDisplayDate":"04 Aug 2026","technology":"WebGL / Three.js / Web Component","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://sticker.oooo.so/"},"download":{"available":false,"label":"None"},"curatorNote":"The peel is more than decoration: curl, stiffness, wind, light, shadow, and sound make a small creative tool feel physical without hiding its controls.","creatorName":"CatsJuice / @cats_juice","creatorUrl":"https://github.com/CatsJuice","sourceUrl":"https://sticker.oooo.so/","repositoryUrl":"https://github.com/CatsJuice/sticker-forge","licenseUrl":"https://github.com/CatsJuice/sticker-forge/blob/main/LICENSE","treatment":"Kaki-authored CSS diagrams and editorial analysis; no source screenshots, code, or uploaded artwork are reproduced.","licenseLabel":"MIT License for the repository software; Kaki does not redistribute a package or claim separate rights to source media.","url":"https://shojum.com/kaki/design/sticker-forge","dateModified":"2026-08-04"},{"slug":"x-money-footer-trace","accession":"K–INSP–002","title":"X Money Footer Trace","description":"A cursor-following spotlight that locally intensifies the outlined X.com footer wordmark.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Text motion","Typography","Cursor","SVG"],"techniques":["SVG radial mask","Pointer tracking","Layered strokes","ViewBox mapping"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference video is planned when the secured CMS and media workflow are available.","technology":"SVG radial mask / pointer tracking","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://money.x.com/en"},"download":{"available":false,"label":"None"},"curatorNote":"The interaction is quiet but precise: the wordmark remains readable at rest, then a soft cursor-sized field turns passive linework into a moment of local depth and emphasis.","creatorName":"X Money / X","creatorUrl":"https://x.com/","sourceUrl":"https://money.x.com/en","treatment":"Kaki-authored reconstruction of the observed pointer mapping and radial-mask behavior using original Kaki / かき SVG text; no X wordmark path, source screenshot, or bundled source code is reproduced.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/x-money-footer-trace","dateModified":"2026-08-05"},{"slug":"colossus-numerical-timeline","accession":"K–INSP–003","title":"Colossus Numerical Timeline","description":"A hover-scrub milestone track paired with in-view rolling-number transitions.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Data motion","Timeline","Typography","Scroll trigger"],"techniques":["NumberFlow digit roll","Intersection observer","Pointer scrubbing","Spring progress"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference video is planned when the secured CMS and media workflow are available.","technology":"Number Flow / in-view trigger / pointer-index mapping","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://x.ai/colossus"},"download":{"available":false,"label":"None"},"curatorNote":"Two restrained motions make dense infrastructure data easier to scan: figures roll only when they enter view, while one horizontal gesture reveals the chronology without expanding the page.","creatorName":"xAI","creatorUrl":"https://x.ai/","sourceUrl":"https://x.ai/colossus","treatment":"Kaki-authored interaction reconstruction using original labels, editorial copy, layout, palette, and code. The supplied archive informed the behavior; no source screenshot, media asset, or bundled code is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/colossus-numerical-timeline","dateModified":"2026-08-05"},{"slug":"xai-path-of-progress","accession":"K–INSP–004","title":"xAI Path of Progress","description":"An event-dense chronology where hover selects a milestone and a spring tracks progress.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Timeline","History","Hover","Editorial motion"],"techniques":["Event-index spacing","Hover-to-select","Spring progress","Keyed crossfade"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference video is planned when the secured CMS and media workflow are available.","technology":"Motion / indexed milestone state / hover and click selection","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://x.ai/company"},"download":{"available":false,"label":"None"},"curatorNote":"The timeline compresses a long institutional history into one calm line: every dot remains lightweight, while the selected event receives enough room to become readable and linkable.","creatorName":"xAI","creatorUrl":"https://x.ai/","sourceUrl":"https://x.ai/company","treatment":"Kaki-authored interaction reconstruction using original milestone labels, editorial copy, layout, palette, and code. The supplied archive informed the behavior; no source screenshot, media asset, news copy, or bundled code is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/xai-path-of-progress","dateModified":"2026-08-05"},{"slug":"cursor-section-index-dot","accession":"K–INSP–005","title":"Cursor Section Index Dot","description":"A sticky page index whose single accent mark springs diagonally to the end of the current section label.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Navigation","Scroll","Editorial motion","Wayfinding"],"techniques":["Shared-layout marker","Intersection-observer band","Spring layout transition","Current-entry semantics"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Shared-layout marker / intersection-observer scrollspy","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/en-US/composer"},"download":{"available":false,"label":"None"},"curatorNote":"The mark rests after the label rather than in a column of its own, so unequal section names turn a vertical change of state into a diagonal move. It is the smallest gesture in the collection and the one that most clearly rewards being watched.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/en-US/composer","treatment":"Kaki-authored reconstruction of the observed marker behavior using original Kaki section labels, editorial copy, layout, palette, and code. The supplied archive informed the behavior; no Cursor screenshot, page copy, class name, media, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-section-index-dot","dateModified":"2026-08-05"},{"slug":"cursor-training-compute-bars","accession":"K–INSP–006","title":"Cursor Training Compute Bars","description":"A stacked proportion broken across three rows, where each bar grows at a length-derived pace and its own readout counts with it.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Data motion","Charting","Scroll trigger","Proportion"],"techniques":["Offset stacked rows","Length-derived duration","Linear width transition","Progress-linked readout"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"In-view trigger / linear width transition / rAF readout","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/en-US/composer"},"download":{"available":false,"label":"None"},"curatorNote":"The chart earns its motion twice: breaking one stacked bar onto separate rows makes a lopsided split readable, and tying each bar's duration to its own length keeps a long bar from feeling slow while the number inside it stays honest to the width.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/en-US/composer","treatment":"Kaki-authored reconstruction of the observed chart behavior using an illustrative Kaki sample distribution, original labels, editorial copy, layout, palette, and code, plus a replay control the source does not have. The supplied archive informed the behavior; no Cursor figure, value, screenshot, page copy, class name, media, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-training-compute-bars","dateModified":"2026-08-05"},{"slug":"cursor-lattice-pulse-field","accession":"K–INSP–007","title":"Cursor Lattice Pulse Field","description":"A canvas lattice that drifts, yields to the pointer, and carries coloured signals that leave a decaying trail.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Case study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Canvas","Generative","Pointer","Ambient motion"],"techniques":["Seeded lattice","Random-walk signals","Spring displacement","Batched canvas strokes"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"2D canvas / requestAnimationFrame / seeded generation","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/en-US/composer"},"download":{"available":false,"label":"None"},"curatorNote":"It reads as decoration and is engineered like a product: a fixed seed so the composition is authored rather than random, a walk that can only drift one row at a time so every trail looks like a route, and a loop that is not scheduled at all when nobody is looking at it.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/en-US/composer","treatment":"Kaki-authored reconstruction of the observed canvas behavior using original Kaki colours, geometry, arrowhead, editorial copy, and code. The supplied archive informed the behavior; no Cursor screenshot, media, brand mark, logo path, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-lattice-pulse-field","dateModified":"2026-08-05"},{"slug":"cursor-benchmark-scatter","accession":"K–INSP–008","title":"Cursor Benchmark Scatter","description":"A reversed-axis scatter whose points, labels, series, and gridlines all re-project on one shared 600ms curve when the metric changes.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Data motion","Charting","SVG","Hover"],"techniques":["Shared re-projection curve","Reversed value axis","Animated path data","Tick handover on hover"],"curatedBy":"Shojum","curatedDate":"2026-08-05","curatedDisplayDate":"05 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"SVG / CSS transitions on transform and path data","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/en-US/composer"},"download":{"available":false,"label":"None"},"curatorNote":"Two decisions carry it. Reversing the value axis means the desirable corner is the upper right on every metric, so switching tabs never asks the reader to re-learn the chart; and moving every element on one shared curve makes the switch read as the same data seen differently rather than as a different chart.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/en-US/composer","treatment":"Kaki-authored reconstruction of the observed chart behavior using an illustrative Kaki sample, original series, labels, axis copy, palette, and code, a deliberately simpler label placement than the source's solver, and a panel-local appearance control the source does not have. The supplied archive informed the behavior; no Cursor figure, model name, benchmark value, screenshot, page copy, class name, media, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-benchmark-scatter","dateModified":"2026-08-05"},{"slug":"cursor-community-globe","accession":"K–INSP–009","title":"Cursor Community Globe","description":"A draggable dot globe whose markers answer to the pointer, and whose card grows from a name into a record once chosen.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Case study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Canvas","Map","Pointer","Disclosure"],"techniques":["Orthographic projection","Hemisphere culling","Hover-to-select escalation","Row-height disclosure"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Canvas orthographic globe / WebGL atmosphere / DOM popup","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/community"},"download":{"available":false,"label":"None"},"curatorNote":"The globe is the least interesting thing about the globe. What carries it is the escalation: the same card serves as a one-word tooltip while the pointer passes and as a focusable dialog once something is chosen, growing its second row rather than swapping for a different component.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/community","treatment":"Kaki-authored reconstruction of the observed globe behavior using invented Kaki places, an abstract dot sphere rather than any map data, original copy, palette, and code. The supplied archive informed the behavior; no Cursor screenshot, city, chapter, host, event, map dataset, shader, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-community-globe","dateModified":"2026-08-06"},{"slug":"cursor-logo-playback","accession":"K–INSP–010","title":"Cursor Logo Playback","description":"A wordmark that animates by crossfading a pre-rendered transparent video over the static mark, on a hover and first-scroll trigger.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Brand","Video","Hover","Progressive enhancement"],"techniques":["Alpha video overlay","Multi-codec sources","Capability gating","Held-pointer repeat"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Transparent video over static SVG / capability-gated playback","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/community"},"download":{"available":false,"label":"None"},"curatorNote":"The most polished motion on the page is the one piece that was not written as motion at all. Treating the animated mark as a media asset rather than a drawing buys a level of finish no CSS timeline would reach, at the cost of three codec containers and a static fallback that has to look finished on its own.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/community","treatment":"Kaki-authored reconstruction of the observed playback choreography using Kaki's own persimmon mark and drawn SVG motion in place of the source's video asset. The supplied archive informed the behavior; no Cursor wordmark, logo path, video, poster frame, screenshot, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-logo-playback","dateModified":"2026-08-06"},{"slug":"cursor-filter-dropdown","accession":"K–INSP–011","title":"Cursor Filter Dropdown","description":"A filter menu that animates open and shut, except when the choice changes the list underneath — then it just goes.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Menu","Filtering","Disclosure","State"],"techniques":["Delayed visibility transition","Conditional exit suppression","Shared outside-press close","Directional flip"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"CSS visibility-delay transition / conditional transition suppression","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/careers"},"download":{"available":false,"label":"None"},"curatorNote":"The whole record turns on one conditional: the panel animates shut when nothing changes, and is cut instantly when the selection does. Motion that knows when to get out of the way is rarer than motion that is well timed.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/careers","treatment":"Kaki-authored reconstruction of the observed menu behavior using an invented Kaki sample index, original labels, copy, palette, and code, with keyboard support the source does not implement. The supplied archive informed the behavior; no Cursor screenshot, role, team, location, page copy, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-filter-dropdown","dateModified":"2026-08-06"},{"slug":"cursor-ascii-field","accession":"K–INSP–012","title":"Cursor ASCII Field","description":"A canvas that samples a moving field to a character grid, choosing each glyph by brightness from a ramp with the wordmark inside it.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["ASCII","Canvas","Luminance","Generative"],"techniques":["Brightness ramp","Per-frame auto-contrast","Measured cell aspect","Throttled redraw"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"2D canvas / luminance-to-glyph sampling","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/cli"},"download":{"available":false,"label":"None"},"curatorNote":"The ramp is the joke and the method at once: thirteen characters ordered from lightest to densest, with the company name sitting in the middle of the scale where the mid-tones fall. A brand appears only where the image is half lit — which is why the record quotes the ramp rather than paraphrasing it, since a substitute ramp cannot demonstrate the idea.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/cli","treatment":"Kaki-authored reconstruction of the observed renderer, reproducing its grid sizing, cell-aspect measurement, luminance formula, per-frame contrast normalisation, alpha table, font sizing, frame throttle, sampling path, and lifecycle as written. Two subjects are offered: a Kaki field driving the source's own procedural fallback through a Kaki ramp, and a rotating cube drawn from scratch, supersampled and downsampled to match the continuous tone and soft silhouette of a filmed subject, run through the source's thirteen-character ramp, which contains its wordmark and is reproduced verbatim as referential quotation in an attributed study. The loader video the source samples is absent from the archive and is not reproduced, approximated as a copy, or redistributed; no logo path, vector mark, screenshot, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-ascii-field","dateModified":"2026-08-06"},{"slug":"cursor-savings-calculator","accession":"K–INSP–013","title":"Cursor Savings Calculator","description":"A slider whose visible parts are all drawn beside an invisible real input, and a figure whose digit wheel is solved in CSS rather than script.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Forms","Numbers","Slider","Editorial motion"],"techniques":["Invisible native range","Clamped handle geometry","CSS-solved digit wheel","Reserved caption cell"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Hidden range input / CSS mod and round digit wheel","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/cost-savings-calculator"},"download":{"available":false,"label":"None"},"curatorNote":"Both mechanisms here refuse the obvious shortcut. The slider keeps a real input and hides it rather than rebuilding one from pointer events, so the keyboard and assistive layers come free. The figure hands the arithmetic of its own motion to the style engine, so script only ever announces which numeral is current.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/cost-savings-calculator","treatment":"Kaki-authored reconstruction of the observed slider geometry and digit-wheel mechanism using an invented editorial workload, original labels, copy, palette, and code. The supplied archive informed the behavior; no Cursor model name, price, rate, benchmark figure, screenshot, class name, icon font, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-savings-calculator","dateModified":"2026-08-06"},{"slug":"cursor-teams-motion-set","accession":"K–INSP–014","title":"Cursor Teams Motion Set","description":"Three small motions from one page: a two-faced flip that cycles a list of any length, a glow written per frame, and a shimmer that means still going.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["3D transforms","Status","Shimmer","Editorial motion"],"techniques":["Two-face flip cycle","Frozen-frame reset","Per-frame glow","Text-clipped gradient sweep"],"curatedBy":"Shojum","curatedDate":"2026-08-06","curatedDisplayDate":"06 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"CSS 3D transforms / per-frame inline style / background-clip text","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://cursor.com/teams"},"download":{"available":false,"label":"None"},"curatorNote":"The flip is the one to take away. Two faces and a list of any length, reconciled by advancing every slot while transitions are switched off — the same freeze-and-reset move this collection has now found in four separate places on the same site, which is what a house style actually looks like.","creatorName":"Cursor / Anysphere","creatorUrl":"https://cursor.com/","sourceUrl":"https://cursor.com/teams","treatment":"Kaki-authored reconstruction of three observed mechanisms using invented Kaki marks set as type, original copy, palette, and code. The supplied archive informed the behavior; no third-party logo, customer name, brand mark, screenshot, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.","url":"https://shojum.com/kaki/design/cursor-teams-motion-set","dateModified":"2026-08-06"},{"slug":"xai-pricing-tabs-matrix","accession":"K–INSP–015","title":"xAI Pricing Tabs and Matrix","description":"A three-way audience switch above plan cards, followed by a six-plan comparison matrix that changes its header language across breakpoints.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Pricing","Tabs","Comparison","Responsive data"],"techniques":["Measured active indicator","Roving tab focus","Sticky comparison header","Breakpoint-specific plan key"],"curatedBy":"Shojum","curatedDate":"2026-08-13","curatedDisplayDate":"13 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Base UI tabs / Motion panel transition / responsive CSS grids","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://x.ai/pricing"},"download":{"available":false,"label":"None"},"curatorNote":"The page separates two different pricing questions without making them compete. The tabs answer “which context am I buying for?” with a short card set; the matrix below answers “what changes between every tier?” and keeps that full comparison stable no matter which audience was selected above.","creatorName":"xAI","creatorUrl":"https://x.ai/","sourceUrl":"https://x.ai/pricing","treatment":"Kaki-authored reconstruction of the observed audience tabs, measured active indicator, keyed panel entrance, sticky plan header, and breakpoint-specific six-column comparison using fictional Kaki plan names, values, copy, layout, palette, and code. Kaki replaces the source's div-based comparison grid with a semantic table and adds explicit tab-to-panel relationships; no xAI screenshot, product price, feature claim, logo, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/xai-pricing-tabs-matrix","dateModified":"2026-08-13"},{"slug":"xai-imagine-swipe-stack","accession":"K–INSP–016","title":"xAI Imagine Swipe Stack","description":"A four-card image stack whose top frame can be thrown in either direction, returned by a spring, or advanced automatically with a quieter fade.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Image stack","Swipe","Drag","Automatic motion"],"techniques":["Four-card depth stack","Distance-or-velocity release","Spring return","Interaction hold"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Motion drag values / spring transforms / timed stack rotation","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://x.ai/api/imagine"},"download":{"available":false,"label":"None"},"curatorNote":"The stack turns a passive hero image into a small, legible toy without adding visible carousel furniture. Its best detail is the split between manual and automatic movement: a throw leaves sideways with the hand, while the timer removes the top card with a quieter fade so unsolicited motion does not impersonate a gesture.","creatorName":"xAI","creatorUrl":"https://x.ai/","sourceUrl":"https://x.ai/api/imagine","treatment":"Kaki-authored reconstruction of the observed four-card depth stack, horizontal top-card drag, distance-or-velocity release, spring return, automatic advance, and post-interaction hold using invented paper specimens, original labels, palette, controls, and code. No xAI screenshot, generated image, product claim, logo, prompt, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/xai-imagine-swipe-stack","dateModified":"2026-08-14"},{"slug":"x-developer-uptime-strips","accession":"K–INSP–017","title":"X Developer Uptime Strips","description":"Thirty compact service-health slices that enlarge under the pointer and turn a dense endpoint table into a precise time-and-rate inspection surface.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Motion","Status","Data","Hover","Tooltip","Service health"],"techniques":["Thirty-slice history","Threshold color","Discrete hover scale","Time-and-rate tooltip"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"React state / segmented history strip / threshold color / localized time tooltip","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://developer.x.com/status"},"download":{"available":false,"label":"None"},"curatorNote":"The strip compresses thirty readings into less space than a sparkline, then gives one slice just enough scale and annotation to become inspectable. Green, amber, and red carry actual thresholds; the motion does not merely decorate the table.","creatorName":"X Corp.","creatorUrl":"https://x.com/","sourceUrl":"https://developer.x.com/status","treatment":"Kaki-authored reconstruction of the observed thirty-slice history, 99% and 95% color thresholds, 1.25-times active-slice scale, and time-plus-rate tooltip using fictional Kaki endpoints, invented sample rates and times, original layout, palette, accessibility behavior, and code. No X screenshot, operational metric, endpoint inventory, logo, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/x-developer-uptime-strips","dateModified":"2026-08-14"},{"slug":"x-developer-response-marquees","accession":"K–INSP–018","title":"X Developer Response Marquees","description":"Three continuous rows of API response cards use four-copy tracks, different pacing, and one reversed direction to make live data feel abundant without becoming frantic.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Motion","Marquee","Cards","API","Continuous loop","Data"],"techniques":["Four-copy seamless loop","Quarter-track translation","Alternating direction","Edge mask"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"CSS keyframes / repeated response-card tracks / directional masks / responsive timing","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://developer.x.com/#livedata"},"download":{"available":false,"label":"None"},"curatorNote":"The field sells velocity through accumulation rather than speed. Long loops keep each row calm; different durations prevent the three seams from announcing themselves together; reversing the middle row creates useful cross-current while the masked edges let the cards enter and leave softly.","creatorName":"X Corp.","creatorUrl":"https://x.com/","sourceUrl":"https://developer.x.com/#livedata","treatment":"Kaki-authored reconstruction of the observed three-row response field, four repeated copies per row, quarter-track translation, alternating direction, desktop and mobile durations, card proportions, and horizontal edge masks using fictional Kaki response data, an original paper-led palette, pause behavior, reduced-motion handling, and original code. No X response copy, account name, screenshot, logo, class name, font, media asset, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/x-developer-response-marquees","dateModified":"2026-08-14"},{"slug":"x-developer-comparison-border","accession":"K–INSP–019","title":"X Developer Comparison Border","description":"A quiet old-versus-new comparison gives only the preferred card a moving border, turning one pixel of light into hierarchy, direction, and emphasis.","format":"Animation","primaryKind":"Inspiration","mediaType":"Motion","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Motion","Comparison","Cards","Border","Hierarchy","Pricing"],"techniques":["Masked border beam","CSS offset path","Four-second perimeter loop","Asymmetric emphasis"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"CSS motion path / dual mask border clipping / linear perimeter animation","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://developer.x.com/#comparison"},"download":{"available":false,"label":"None"},"curatorNote":"The border earns attention because almost everything else stays still. The old card establishes a low-contrast baseline; the new card adds only a faint surface lift and one traveling highlight. Motion therefore reads as editorial preference rather than ambient decoration.","creatorName":"X Corp.","creatorUrl":"https://x.com/","sourceUrl":"https://developer.x.com/#comparison","treatment":"Kaki-authored reconstruction of the observed paired comparison, inert old card, subtly raised new card, one-pixel masked border, 64-pixel gradient beam, rounded rectangular offset path, and four-second linear infinite loop using fictional Kaki edition copy, an original palette, pause behavior, reduced-motion handling, and original code. The homepage preview intentionally isolates only the selected moving card; the dialog and full record restore the comparison. No X pricing claim, benefit or drawback copy, screenshot, logo, class name, font, media asset, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/x-developer-comparison-border","dateModified":"2026-08-14"},{"slug":"x-developer-glow-button","accession":"K–INSP–020","title":"X Developer Glow Button","description":"A nearly white action pill uses one tight shadow and one broad blurred halo to stay luminous at rest, then sharpens only its outer glow on hover.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Interaction","Button","Glow","CTA","Hover","Focus"],"techniques":["Layered white halo","Inset face layer","Box-shadow transition","Visible focus outline"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"Layered CSS surfaces / box shadow / blur / 200ms hover transition","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://developer.x.com/#comparison"},"download":{"available":false,"label":"None"},"curatorNote":"The glow is present before interaction, so the button does not need to jump, pulse, or scale to announce itself. Hover merely tightens the emphasis. That restraint is the useful detail: luminance establishes priority while geometry and text remain completely stable.","creatorName":"X Corp.","creatorUrl":"https://x.com/","sourceUrl":"https://developer.x.com/#comparison","treatment":"Kaki-authored reconstruction of the observed rounded action, eighty-percent white border, ninety-five-percent white surface, 25-pixel white rest shadow at thirty-five-percent opacity, separate halo extending twelve pixels beyond the button with twenty-percent white fill, 40-pixel blur and thirty-five-percent opacity, and a 200ms hover change to a 30-pixel shadow at forty-five-percent opacity. Kaki uses an original label, palette adjustment, inert editorial action, and code. No X call-to-action text, pricing claim, screenshot, logo, icon geometry, class name, font, media asset, destination, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/x-developer-glow-button","dateModified":"2026-08-14"},{"slug":"xai-imagine-restyle-comparator","accession":"K–INSP–021","title":"xAI Imagine Restyle Comparator","description":"A draggable divider clips one synchronized restyle over its source while a compact treatment rail swaps the compared media without resetting the composition.","format":"Interaction","primaryKind":"Inspiration","mediaType":"Interactive","editorialDepth":"Annotated study","authorship":"third_party_inspiration","authorshipLabel":"Third-party inspiration","tags":["Comparison","Slider","Video","Clipping","Restyle"],"techniques":["Inset clip reveal","Clamped document drag","Paired media playback","Time resynchronization"],"curatedBy":"Shojum","curatedDate":"2026-08-14","curatedDisplayDate":"14 Aug 2026","futureMediaNote":"A short source-reference capture is planned when the secured CMS and media workflow are available.","technology":"React drag state / document mouse and touch listeners / CSS clip-path / synchronized muted video / treatment tabs","screenCount":3,"live":{"available":true,"verified":true,"label":"Available","url":"https://x.ai/api/imagine"},"download":{"available":false,"label":"None"},"curatorNote":"The divider is unusually direct because it changes only visibility, not layout. The source and restyle keep the same frame, clock, and crop, so the visitor reads transformation rather than two unrelated examples. The treatment rail then changes the right-hand answer without disturbing the question on the left.","creatorName":"xAI","creatorUrl":"https://x.ai/","sourceUrl":"https://x.ai/api/imagine","treatment":"Kaki-authored reconstruction of the observed fifty-percent split, clamped horizontal drag, left-inset clip reveal, four-pixel divider, centered circular grip, mounted treatment set, 300ms treatment crossfade, paired playback, and 0.05-second resynchronization threshold using fictional animated CSS scenes, invented treatment labels, a native range input, original palette, controls, and code. No xAI video, poster, generated image, style label, product claim, screenshot, logo, class name, or bundled source is republished.","licenseLabel":"No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.","url":"https://shojum.com/kaki/design/xai-imagine-restyle-comparator","dateModified":"2026-08-14"}]}