61 components.
Every building block behind the site, documented from the code itself: what it does, how it’s made and where it appears. This page reads the components when the site is built, so it’s always current.
- 61components
- 19drawn in SVG
- 13with keyboard controls
- 18drawn live (WebGL, canvas)
- 43with a reduced-motion version
- 12.6klines
All components
Showing all 61
Home 8
The home page’s hero, its case statements and the backgrounds behind them. Between full-screen sections the page soft-snaps (not on touch screens, which scroll natively): a function in the motion package rather than a component, described under Scroll in the motion guidelines.
-
AwardCard
77 lines
The TriNetX Pinnacle award and the TriNetX case, one section on home: over the TriNetX AI field, the Pinnacle mark, a purple heading naming the Platinum award for clinical research AI, a lead line, the TriNetX mark (CaseCredit passed in the slot, with noLink) and an Explore link to the case study.
- SVG
- Reduced motion
On: Home
-
CaseCredit
134 lines
The credit on a home case statement: the client’s mark above the statement and an Explore link beneath it that can play the case’s film. The mark settles in out of a soft blur and the link follows a beat behind; on phones and tablets the statement fades in with the mark. The drawn arrow nudges on hover, and reduced motion shows everything at once.
- SVG
- ScrollTrigger
- Reduced motion
On: Home
-
CaseFilmJump
133 lines
The work grid’s way into a case, for case links on home: the page fades to black, the case’s own film plays, holds two seconds and fades out, and the case page fades in. A click or key skips to the exit and modified clicks keep their meaning; reduced motion gets a short fade instead.
- Film
- Reduced motion
- Keyboard
On: Home
-
DfFaces
543 lines
Behind the Media Literacy statement on home, a synthetic portrait arrives every 7 seconds, large and half off the edge on alternating sides. Each of the seven, none of a real person, is exposed as made in its own way, such as a thermal scan, splats or voxels. Runs only in view; reduced motion shows one face, still.
- Canvas
- Seek hook
- Reduced motion
On: Home
-
EarthGlow
90 lines
Earth’s atmosphere at the bottom of a home section: a thin bright limb under a blue haze and faint violet, thinning toward both ends, with the planet in the page’s black. Drawn once per size on a dithered canvas, it never bands. It fades up as the section’s top passes 65% of the screen; reduced motion shows it at once.
- Canvas
- Reduced motion
On: Home
-
HeroMosaic
1590 lines
The home hero, “Tessera.” Behind the headline, one shader flies through four worlds without a cut: microbes that grow into a beating embryo, through its eye into deep space, a dive into a spiral galaxy and the Earth at sunrise, then back to the microbes. It starts after the intro and pauses off-screen. Its quality adapts to the device as it runs (on touch screens through an offscreen target, so the canvas never changes size mid-flight); reduced motion shows the Earth, still.
- WebGL
- Seek hook
- Reduced motion
On: Home
-
LogoMarquee
137 lines
A looping band of client logos under the home hero, every mark turned white and faded in and out at the edges, with no visible seam. The order changes on each visit, keeping the universities evenly spread and no two neighbors from the same sector. Reduced motion shows the logos still, in a wrapped grid.
- Reduced motion
On: Home
-
TnxAiField
191 lines
Behind the TriNetX award section on home, patient records drift in as faint points of light and curve into a large four-point AI spark of particles. Every 7 seconds the spark turns, settles and pulls back, then swells as its rim lights and lifts toward the viewer. Runs only in view; reduced motion shows one still frame.
- Canvas
- Seek hook
- Reduced motion
On: Home · inside AwardCard
Case studies 28
Prototypes, rebuilt screens and hero backgrounds, one case at a time.
-
BrandGuide
97 lines
Brand guidelines as a case-page section on Media Literacy and MIT: typeface cards, color swatches with their contrast ratios and a two-panel board, one light and one dark or colored, showing the client’s type, marks and buttons as they ship. Every brand shares the format, and each board is plain data, so a new brand needs no new markup.
- SVG
On: Media Literacy, MIT
-
CaFilm
297 lines
The CareAcademy case hero background: a film of a woman in glasses plays once, softly vignetted; in its last seconds she turns into a live halftone of dots in her own colors and holds. The CareAcademy mark comes up small in fine dots and now and then a dotted arrow circles her head. Reduced motion shows the last frame and the mark.
- Canvas
- Film
- Reduced motion
On: CareAcademy
-
CaHomeFull
56 lines
The full careacademy.com home page in a browser frame on the CareAcademy case, scrolled by the visitor with touch, wheel or keyboard. With auto on, it tours itself in view: slowly to the footer, a pause, back to the top and again; any wheel, touch, click or key hands it over. Reduced motion skips the tour.
- Reduced motion
- Keyboard
On: CareAcademy
-
CaSplit
129 lines
CareAcademy’s testing practice, more than 10 A/B and split-traffic tests on the sign-up path, told as one looping illustration: visitors stream in and divide between two wireframed pages, each fills its sign-up meter and the winner becomes the next baseline. Four tallies of the surrounding work follow. It runs only in view; reduced motion shows a finished round.
- Canvas
- Reduced motion
On: CareAcademy
-
CaseFlorals
319 lines
Ellie Cashman’s florals behind her case-study hero: her paintings, each in its own place and scale, fade in and out one at a time, swaying in a faint WebGL breeze as the field sinks more slowly than the page. Each is feathered at its edges and placed so the text keeps its contrast. On phones they take turns in one place behind the title, larger and quieter, without the breeze; reduced motion keeps the first, still.
- WebGL
- GSAP
- ScrollTrigger
- Reduced motion
-
CvsCompete
417 lines
The CVS mobile-web competitive study in numbers: six tabs compare six retailers, from a page-load race to page weight and tappable tiles, with CVS in red and every value labeled; its recommendations follow. The load race plays at double speed once in view, with Replay. Arrow keys switch tabs, tables carry the data for screen readers and reduced motion shows the finished charts.
- SVG
- Reduced motion
- Keyboard
On: CVS Health
-
CvsHero
280 lines
The CVS Health case hero background: a clip plays once behind a wide vignette, and in its last seconds the CVS heart arrives huge with the footage inside it, then settles half off the left edge in deep CVS red as soft glints drift along its border. A refused play (Low Power Mode) goes straight to the heart; reduced motion keeps the poster.
- Canvas
- Film
- Reduced motion
On: CVS Health
-
CvsShopProto
586 lines
A concept for CVS Shop search results, working in a phone frame on the CVS case: search the list, tap an image to zoom, pick a shade on a radial swatch wheel and a quantity from a styled list, then add to the basket and check out. Savings add up from the deals on-screen, CarePass ships free and every control works by keyboard.
- SVG
- Reduced motion
- Keyboard
On: CVS Health
-
CvsUsability
126 lines
An unmoderated usability test of CVS’s “Compare & save” store-brand module, with 10 shoppers on desktop and phones: four headline numbers, four takeaways with the testers’ own words and the “You’ve saved” basket confirmation they saw, drawn in code. The saving pops in as the confirmation comes into view; reduced motion keeps it still.
- SVG
- Reduced motion
On: CVS Health
-
DfBackdrop
62 lines
A live background from the Media Literacy module’s own canvas animations. On the case hero it runs the spiral vortex, veiled so the title reads: a face film morphs, breaks into points at the funnel’s mouth and sends a wave of light down it. Runs only in view; reduced motion shows the vortex still, without the face.
- Reduced motion
On: Media Literacy
-
DfLive
321 lines
A live stage on the Media Literacy case: the module’s own canvas animations in the page, one alone or several behind tabs, with pause and full-screen buttons. Full screen steps through every animation on the page in a fresh random order, by arrow buttons or keys. Runs only in view; reduced motion draws one still.
- SVG
- Reduced motion
- Keyboard
On: Media Literacy
-
DfMotion
161 lines
The Media Literacy module’s motion rules, drawn as wireframes on canvas: the background field with the image layer easing over it, then a card per rule (easing toward the pointer, breathing to a level, one signal at a time and settling to still), each with its name and a line. Runs only in view; reduced motion draws each still.
- Canvas
- Reduced motion
On: Media Literacy
-
DfTheme
76 lines
Media Literacy’s theme switch, on the case page: one screen of the module (Part II, screen 6) in its dark theme and with the light header and footer, the same moment in both. Dark / Light buttons under it swap the screenshot, and so does the switch drawn in the screenshot’s own header (a hotspot over it, ringed until first used). The swap is at once, as a state change.
- Reduced motion
On: Media Literacy
-
EllieConfigurator
456 lines
A working recreation of Ellie Cashman’s custom-wallpaper configurator. Press Play and a guide cursor measures the wall, scales the pattern and drags it into place as strips, overage and price follow; then it is the reader’s, with Replay. Touching anything hands it over and reduced motion skips the guide; every control is custom and works by keyboard.
- Canvas
- SVG
- GSAP
- Reduced motion
- Keyboard
-
EllieDesigns
154 lines
Ellie Cashman’s wallpaper designs behind the copy on home and her case page: one fades in on the right, holds and dissolves as the next fades in along the bottom, each feathered to nothing toward the text. With shuffle (the case page) the order is new on every visit. It runs only in view. On a phone the case page keeps the desktop composition, scaled down to a 16:10 stage; reduced motion shows the first design, still.
- Reduced motion
On: Home, Ellie Cashman Design
-
EllieMorph
303 lines
“Sketch to storefront” on the Ellie case, a pinned, scroll-driven assembly: as the reader scrolls, each part of the annotated wireframe lifts off, travels to its place in the shipped storefront and resolves into it, from navigation and hero to filters and products. Stage buttons jump to any step and it unpins once finished. On phones and tablets it doesn’t pin: it plays through once as it comes into view. Reduced motion offers a two-state toggle.
- GSAP
- ScrollTrigger
- Reduced motion
- Keyboard
-
ExtArrow
13 lines
-
FlowWireframe
252 lines
The store-fulfillment flow from the CVS Health case as a wireframe, every label a gray bar, behind the CVS statement on home and inline in the case. In view, the connectors draw left to right, then order dots travel the routes, pausing off-screen. Reduced motion shows the finished drawing, still.
- SVG
- GSAP
- ScrollTrigger
- Reduced motion
On: Home, CVS Health
-
GlobeWire
110 lines
A wireframe globe on the Ellie Cashman Design page: a 10° graticule seen from a little above, so the North Pole is in view, with only the near hemisphere drawn, which makes it read as solid. It turns once every 48 seconds, only while on-screen; reduced motion draws it once, still.
- Canvas
- Reduced motion
-
LhrpScroll
82 lines
A full-page capture of the Labor History Resource Project home page in a browser window, scrolled by the visitor with touch, wheel or keyboard. With auto on, it tours itself once in view: it holds on the hero, scrolls slowly to the bottom and back up, then stops, and any scroll, drag, click or key hands the window over. Reduced motion skips the tour.
- Reduced motion
- Keyboard
-
MitxHome
166 lines
The MITx Online home page rebuilt in code, ending at its row of course images. In view, the hero photograph rises out of the dark, then small square dots in MIT’s colors build in from the right under the title. Tabs and filters are static; reduced motion shows the finished hero.
- Canvas
- Reduced motion
On: MIT
-
MitxStory
117 lines
The MITx “Driving Innovation” page rebuilt in code, with the page’s own copy and photograph and its wireframe landscape in the bottom left: a mesh of peaks in thin white lines on black, rolling slowly toward the viewer. The landscape moves only in view; reduced motion holds it still.
- Canvas
- SVG
- Reduced motion
On: MIT
-
NasaExplorer
797 lines
An interactive sketch of the NASA Goddard concept: one region over eight satellite passes as a reservoir fills, a town grows and a forest is cleared, with public photos pinned pass by pass. Each pin opens a drawer with its photo and matching pass. In view, it plays once forward and back, then stops; on phones its drawer opens with the tour and stays open. Reduced motion never autoplays.
- Canvas
- SVG
- Reduced motion
- Keyboard
On: NASA Goddard
-
NasaOrbit
293 lines
The NASA Goddard case hero background: a planet hangs from the top right as a satellite crosses it, maps a swath and pins ground photos where it passes, orbit after orbit, while now and then a large satellite wing drifts past close to the camera. Runs only in view; reduced motion draws one still frame.
- Canvas
- Seek hook
- Reduced motion
On: NASA Goddard
-
SketchToSystem
183 lines
Ellie Cashman’s florals on the left of her statement, answering the designs on the right: one print at a time blooms out of a soft blur, holds and dissolves (the rich variant fades still prints in fuller color). Shuffle, on the case page, deals a fresh order and fresh places on every visit. Runs only in view; reduced motion shows the first print.
- Reduced motion
On: Home, Ellie Cashman Design
-
TnxKit
434 lines
The TriNetX UI kit, live: a query card with a ComboBox, the AI assistant, filters and tabbed results that raise a Toast on save, all custom and wired to one small cohort. In view, the assistant plays one scripted turn, then offers Replay; every control works by keyboard, and reduced motion shows the turn at once.
- SVG
- Reduced motion
- Keyboard
On: TriNetX
-
TnxReel
454 lines
The TriNetX kit in motion on a design-canvas board: a camera follows a cursor as it adds a term, flips logic, drags the slider and saves, then asks the assistant, whose answer adds to the query, until the board turns dark. Press Play; it plays once on-screen, then offers Replay. Reduced motion shows the board, still.
- SVG
- GSAP
- Reduced motion
On: TriNetX
-
TxAssistant
431 lines
The TriNetX assistant in the product: the real global rail beside the workspace. Press Play and a ghost cursor opens the Workspace popover, picks Query Builder and opens the AI assistant prototype, whose answer fills the first group’s terms as the patient count grows. Every control works by hand; reduced motion goes straight to the answer.
- SVG
- Reduced motion
- Keyboard
On: TriNetX
Approach, contact and about 3
The Approach page’s phases, sky and yarn.
-
ApproachPhases
113 lines
The Approach page’s phases section: the seven phases as an accordion. Closed, each shows its Roman numeral and a large title; open, a line on what the phase gives the client and its deliverables. One phase opens at a time; each title is a button, and reduced motion drops the height animation.
- Reduced motion
On: Approach
-
ApproachSky
124 lines
The Approach hero: a string sculpture after Naum Gabo’s Linear Construction No. 2, two threaded planes slotted at right angles around an eye-shaped void, in silver with a rare lime strand. It turns slowly, its lattices sliding in moiré. Runs only in view; reduced motion draws one still frame.
- Canvas
- Reduced motion
On: Approach
-
YarnBow
286 lines
A strand of red wool yarn drawn live around the 98.8 accessibility score on Approach: it loops through the last 8, in front and behind, and ties off in a bow at the top right, then its loops and tails sway. It starts in view and pauses off-screen; reduced motion draws the tied bow, still.
- Canvas
- Seek hook
- Reduced motion
On: Approach
Brand books 10
One format for every brand guideline on the site, the clients’ and this one.
-
BrandBook
46 lines
A whole brand guideline as one section, the site’s own or a client’s: a heading and lead, then the sections beside a vertical nav that becomes a sticky tab strip on phones. The nav jumps to each section, moving focus to its title, and marks the one being read.
- Reduced motion
On: TriNetX, Brand guidelines, Motion guidelines · inside TnxBook
-
CodeBlock
26 lines
A block of design tokens as CSS custom properties, with each property name and value colored and a Copy tokens button that confirms with “Copied.” The block scrolls and takes keyboard focus.
On: TriNetX, Brand guidelines, Motion guidelines · inside TnxBook
-
Ramp
20 lines
Color scales in the TriNetX brand guideline, one ramp per row: the scale’s name, then each step as a chip with its number and hex.
On: TriNetX · inside TnxBook
-
Sec
14 lines
One section of a brand book: an optional label, a title and an optional line of intro, then its content. The brand book’s nav links to it and marks it while it is read.
On: TriNetX, Brand guidelines, Motion guidelines · inside TnxBook
-
StateGrid
31 lines
Buttons in each of their states, drawn with their own styles on the client’s surface: default, hover, focus, pressed and disabled, as each variant defines them. Under each comes its spec and, where colors are given, its contrast with a WCAG grade.
On: TriNetX · inside TnxBook
-
Swatches
47 lines
Color swatches in one format for every brand: the chip and its hex, the token’s name and use, and its contrast on white and with the brand’s ink, worked out at build time to WCAG 2. A two-part chip pairs a tone with its button color and gives white text’s contrast on the button.
On: TriNetX, Media Literacy, MIT, Ellie Cashman Design, Labor History Resource Project, CareAcademy, Brand guidelines · inside BrandGuide, TnxBook
-
Table
15 lines
A plain spec table for a brand book, with chosen columns set in mono or as names, inside a labeled region that scrolls and takes keyboard focus.
On: TriNetX, Brand guidelines, Motion guidelines · inside TnxBook
-
TnxBook
319 lines
The TriNetX app brand guideline, from the TriNetX Design System: an overview, typefaces and type scale, color and its scales, layout and spacing, buttons, navigation, controls, the AI set, five accessibility rules and tokens. Components are drawn with the same kit parts the live kit and the reel use.
- SVG
On: TriNetX
-
TypeCards
28 lines
Typeface cards in the one format every brand guideline on the site uses: the role, a big “Aa,” the family’s name, the character set and each weight in use, with an optional fallback note. Each specimen is set in the face itself, on raised cards.
On: TriNetX, Ellie Cashman Design, Labor History Resource Project, CareAcademy, Brand guidelines · inside TnxBook
-
TypeScale
27 lines
The type scale for a brand book. Each role is set in its face at its size, capped so a line fits the screen, then its spec follows in mono: face and weight, size and leading, any tracking or uppercase, its color and where it is used.
On: TriNetX, Brand guidelines · inside TnxBook
No components match. Clear the filter to see all 61.
More about this site
