Framework catalog — 55 variants

Every part, live

11 preloaders, 9 heroes, 6 project galleries. Each one renders here at real page width, with the idea behind it stated plainly. Nothing is a screenshot. Open any one on its own to inspect it at a real viewport width, in either mode.

The Manifesto — Kinetic Typography

loader

Words assemble per character behind masks and stack as a printed record; the plate splits along its seam to exit.

loader-kinetic-typography-08#kinetic#typography#editorial#svg-mask
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Event Horizon — Particle Accretion

loaderWebGL

24k GPU particles orbit a vortex; the disc collapses as the build resolves, then breaks and the camera dollies through the ring.

loader-quantum-portal-09#webgl#particles#shader#3d
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Press Run — Editorial Registration

loader

One serif word sliced into six plates that start out of register and snap into alignment as the load resolves.

loader-editorial-glitch-10#editorial#glitch#halftone#fashion
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Film Gate — Counter as Filmstrip

loader

Every number lives on a strip of film pulled past a fixed gate; neighbouring frames stay visible, out of focus.

loader-percentage-counter-01#counter#cinema#typography
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Blueprint Lattice — Drafted Assembly

loader

A tumbling polyhedral lattice is drawn one member at a time in drafting order, on a dimensioned drawing sheet.

loader-cube-3d-02#blueprint#svg#3d#technical
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Cold Boot — CRT Diagnostics

loader

A composed diagnostics console: build trace typing at load rate, a page map filling in allocator order, then a CRT power-off collapse.

loader-terminal-boot-03#terminal#crt#cyberpunk#diagnostics
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Spool — Tape Transport

loader

Six bands of type accelerate with the load in alternating directions, then the transport locks and the name lands as a title card.

loader-akshat-syne-04#marquee#amber#kinetic
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Coalescence — Gooey Metaballs

loader

Nine droplets orbit a nucleus through a real gooey SVG filter, fusing with surface tension as they are absorbed.

loader-liquid-morph-05#liquid#svg-filter#metaball#organic
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Set in Lead — Swiss Grid (Light)

loader

A 35-cell Swiss forme inked in diagonal sweeps that resolves into the author's initial, on paper stock.

loader-split-curtain-light-07#light#swiss#grid#typography
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Departure — Split-Flap Board

loader

Three rows of mechanical flaps riffle through their glyph set and land in reading order; the board clears itself left-to-right to exit.

loader-split-flap-11#split-flap#mechanical#transit#typography
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Stop Down — Hexagonal Iris

loader

Six blades form a mechanically correct hexagonal iris that opens as the build resolves, twisting as it travels, then fires shut. The only loader that reads the theme tokens, so it is correct in both modes.

loader-aperture-12#iris#aperture#mechanical#both-modes
Inspect on its own

Preloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.

Editorial Rail

navbar

Retracts on scroll down, returns on scroll up, and carries a reading-progress rule on its lower edge.

navbar-minimal-01#minimal#hairline#progress

Glass Capsule

navbar

Condenses as the page gets denser; one shared pill travels between links rather than cross-fading.

navbar-glass-02#glass#layout-animation#condensing

Magnifying Dock

navbar

True macOS magnification — every icon's scale is a Gaussian of its distance from the cursor, so the row deforms as a sheet.

navbar-floating-dock-03#dock#macos#magnification

Site of the Year

hero

Kinetic split-text over a pointer-lit grid, with magnetic CTAs, glass tilt plates and three-rate scroll parallax.

hero-award-soty-07#kinetic#magnetic#tilt#parallax#award

The Lens — Pixel Loupe

hero

A canvas dot matrix magnified by a cursor-held loupe into coarser, coloured pixels; drifts on its own until you take hold.

hero-pixel-lens-06#canvas#loupe#pixel#interactive

The Field — Instanced Wave

heroWebGL

4,096 instanced columns in one draw call; crossing sine trains plus a pointer-driven ripple you can push across the surface.

hero-award-3d-01#webgl#instancing#wave#3d

The Orb — Displaced Sphere

heroWebGL

Simplex-noise vertex displacement with a hand-written fresnel rim; pointer proximity agitates the surface.

hero-3d-02#webgl#shader#noise#fresnel

Split Screen — Counter-Scroll

hero

A fixed statement half beside two plate columns scrolling continuously in opposite directions.

hero-award-bento-02#split#marquee#plates

The Banner — Scroll-Reactive Marquee

hero

The name runs full-bleed across the top and surges with your scroll velocity, then eases back to an idle drift.

hero-akshat-modern-05#marquee#amber#scroll-velocity

Dashboard Bento

hero

A module grid where metrics count up on first view with an eased rAF curve, beside a live availability card and a stack marquee.

hero-bento-04#bento#metrics#dashboard

Statement — Centred Display

hero

The name set to measure so any length fills the line, with a role that swaps beneath it on a mask wipe.

hero-modern-01#typography#centred#rotating

Terminal — Working REPL

hero

A real shell over the config: eight commands, arrow-key history, tab completion, and an intro any keypress skips.

hero-terminal-03#terminal#interactive#repl#developer

Editorial Spread

about

The bio's opening sentence pulled out as a serif standfirst, beside a mono colophon of the facts.

about-split-01#editorial#standfirst#colophon

The Dossier

about

The section pins and the content advances through a fixed frame as you scroll — one panel per sentence of the bio, then focus, then facts.

about-sticky-dossier-02#sticky#scroll-scrub#panels

The Manifesto

about

Type only — the bio at display size, one sentence per masked line, with any word that is also a configured skill or project tag lifted into the accent.

about-manifesto-03#typography#full-bleed#self-annotating

The Orbit

skills

Concentric rings turning at different rates, each chip counter-rotating so its label stays upright; hover holds the field.

skills-award-orb-01#orbit#kinetic#interactive

Weighted Bento

skills

Cells of unequal footprint with real proficiency meters where the config supplies levels, chips where it doesn't.

skills-bento-01#bento#meters#tilt

Kinetic Type Field

skills

A true type cloud at mixed sizes where pointing at a word pushes its neighbours away from the cursor.

skills-cloud-02#cloud#repulsion#typography

The Ledger

experience

A spine that fills with the section's own scroll progress, lighting each node as the reader passes it.

experience-award-timeline-01#timeline#scroll-linked#editorial

Accordion Résumé

experience

One role open at a time on a real height animation, so the section stays one screen tall however long the career is.

experience-timeline-01#accordion#compact

Role Cards

experience

Glass plates with index watermarks; the current role takes the full width and the full detail.

experience-cards-02#cards#tilt#asymmetric

The Index — Liquid Preview

projects

An editorial contents list whose hover raises a spring-lagged preview plate through a turbulence displacement filter.

projects-award-gallery-05#editorial#liquid#svg-filter#index#award

The Stack — 3D Deck

projects

Projects held as a deck in real perspective; advancing promotes the next plate, and rear plates are clickable.

projects-award-3d-01#3d#deck#carousel#tilt

Case Studies

projects

Alternating full-bleed rows whose plate and caption parallax at different rates; filters derived from the actual tags.

projects-akshat-bento-04#case-study#parallax#filterable

Mosaic Wall

projects

A six-column mosaic of unequal footprints revealed by clip-path wipes that alternate direction per cell.

projects-bento-01#bento#mosaic#clip-path

Flip Cards

projects

Real 3D Y-axis flips with hidden backfaces, triggered by hover, focus and tap so the back is always reachable.

projects-cards-02#flip#3d#cards#accessible

Marquee Register

projects

A quiet ruled list where hovering a row turns its title into a running marquee filling the row edge to edge.

projects-minimal-03#minimal#marquee#list

Credential Cards

certifications

Each credential as a glass card led by its issuer, with the verification link as a control rather than a footnote.

certifications-grid-01#certifications#cards#verifiable

The Register

certifications

Credentials set as a ruled index — name and issuer left, date right — the way a transcript lists them.

certifications-ledger-02#certifications#editorial#list

Academic Timeline

education

Qualifications as a ruled descending timeline, year in the margin — the way a CV sets its education block.

education-timeline-01#education#timeline#editorial

Campus Cards

education

Each qualification on its own glass card led by the institution — pairs with the card-based projects and credentials.

education-cards-02#education#cards#glass

The Approach

contact

The address set at display size and magnetic; the form composes a real mailto draft rather than faking a send.

contact-split-01#contact#mailto#magnetic#honest

The Calling Card

contact

Contact as a single tilting plate with a pointer-tracked highlight, offering a real .vcf built from the config so the details leave with the visitor.

contact-calling-card-02#card#tilt#vcard#centred

The Brief

contact

Pick a reason and a timeline instead of facing a blank form; the mailto draft assembles live and is shown verbatim before it opens.

contact-brief-03#chips#guided#mailto#preview

Colophon

footer

An oversized wordmark clipped by the page edge, over a four-column index and a live local clock.

footer-rich-01#colophon#wordmark#clock

The Rule

footer

One hairline row — name, a dot-separated section index, back to top. For compositions that should end on the work, not on the footer.

footer-minimal-02#minimal#single-row#quiet

The Sign-off

footer

The footer is the CTA: an edge-to-edge band of display type running continuously, the whole band one mail link, pausing on hover so it can be read.

footer-marquee-03#marquee#cta#kinetic#oversized

Chromatic Aurora

background

Three gradient sheets drifting on unrelated periods over a slowly turning iridescent conic base. Pure CSS.

bg-aurora#aurora#css-only#gradient

Perspective Mesh

background

A grid floor pitched back to a horizon and travelling toward the camera, with a wall grid behind it. Pure CSS.

bg-grid-mesh#grid#perspective#css-only

Depth Field

backgroundWebGL

Three point shells at different scales, pointer-steered by depth so the parallax reads as volume; soft round sprites via a custom shader.

bg-stars-3d#webgl#particles#parallax

Topography

background

Three islands of real contour lines — circles perturbed by summed sines, so they never cross — drifting on unrelated periods with every fifth line inked as an index contour. Pure SVG.

bg-topography#contour#cartographic#svg#line

Interference

background

Two ring fields at 8px and 9px spacing drifting past each other; the travelling moiré fringes are emergent, not drawn. Pure CSS.

bg-interference#moire#optical#css-only#kinetic

Ruled Paper

background

A ledger sheet — reading-rhythm rules, a heavier line every fifth, an accent margin. The only background that holds still, for pages carrying real body copy.

bg-ruled-paper#ledger#editorial#static#css-only

Flow Field

backgroundWebGL

A domain-warped fBm plasma in a single fullscreen fragment shader — noise sampled through two earlier noise lookups, which is what gives it currents rather than an even cloud.

bg-flow-field#webgl#shader#fbm#fluid