The Manifesto — Kinetic Typography
loaderWords 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-maskPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Event Horizon — Particle Accretion
loaderWebGL24k 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#3dPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Press Run — Editorial Registration
loaderOne 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#fashionPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Film Gate — Counter as Filmstrip
loaderEvery 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#typographyPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Blueprint Lattice — Drafted Assembly
loaderA 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#technicalPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Cold Boot — CRT Diagnostics
loaderA 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#diagnosticsPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Spool — Tape Transport
loaderSix 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#kineticPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Coalescence — Gooey Metaballs
loaderNine 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#organicPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Set in Lead — Swiss Grid (Light)
loaderA 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#typographyPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Departure — Split-Flap Board
loaderThree 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#typographyPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Stop Down — Hexagonal Iris
loaderSix 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-modesPreloaders take the whole viewport and perform an exit. Play it to see the full sequence, including the outro.
Editorial Rail
navbarRetracts on scroll down, returns on scroll up, and carries a reading-progress rule on its lower edge.
navbar-minimal-01#minimal#hairline#progressGlass Capsule
navbarCondenses as the page gets denser; one shared pill travels between links rather than cross-fading.
navbar-glass-02#glass#layout-animation#condensingMagnifying Dock
navbarTrue 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#magnificationSite of the Year
heroKinetic 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#awardThe Lens — Pixel Loupe
heroA 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#interactiveThe Field — Instanced Wave
heroWebGL4,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#3dThe Orb — Displaced Sphere
heroWebGLSimplex-noise vertex displacement with a hand-written fresnel rim; pointer proximity agitates the surface.
hero-3d-02#webgl#shader#noise#fresnelSplit Screen — Counter-Scroll
heroA fixed statement half beside two plate columns scrolling continuously in opposite directions.
hero-award-bento-02#split#marquee#platesThe Banner — Scroll-Reactive Marquee
heroThe 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-velocityDashboard Bento
heroA 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#dashboardStatement — Centred Display
heroThe 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#rotatingTerminal — Working REPL
heroA real shell over the config: eight commands, arrow-key history, tab completion, and an intro any keypress skips.
hero-terminal-03#terminal#interactive#repl#developerEditorial Spread
aboutThe bio's opening sentence pulled out as a serif standfirst, beside a mono colophon of the facts.
about-split-01#editorial#standfirst#colophonThe Dossier
aboutThe 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#panelsThe Manifesto
aboutType 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-annotatingThe Orbit
skillsConcentric rings turning at different rates, each chip counter-rotating so its label stays upright; hover holds the field.
skills-award-orb-01#orbit#kinetic#interactiveWeighted Bento
skillsCells of unequal footprint with real proficiency meters where the config supplies levels, chips where it doesn't.
skills-bento-01#bento#meters#tiltKinetic Type Field
skillsA true type cloud at mixed sizes where pointing at a word pushes its neighbours away from the cursor.
skills-cloud-02#cloud#repulsion#typographyThe Ledger
experienceA 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#editorialAccordion Résumé
experienceOne 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#compactRole Cards
experienceGlass plates with index watermarks; the current role takes the full width and the full detail.
experience-cards-02#cards#tilt#asymmetricThe Index — Liquid Preview
projectsAn 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#awardThe Stack — 3D Deck
projectsProjects held as a deck in real perspective; advancing promotes the next plate, and rear plates are clickable.
projects-award-3d-01#3d#deck#carousel#tiltCase Studies
projectsAlternating full-bleed rows whose plate and caption parallax at different rates; filters derived from the actual tags.
projects-akshat-bento-04#case-study#parallax#filterableMosaic Wall
projectsA six-column mosaic of unequal footprints revealed by clip-path wipes that alternate direction per cell.
projects-bento-01#bento#mosaic#clip-pathFlip Cards
projectsReal 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#accessibleMarquee Register
projectsA 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#listCredential Cards
certificationsEach 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#verifiableThe Register
certificationsCredentials set as a ruled index — name and issuer left, date right — the way a transcript lists them.
certifications-ledger-02#certifications#editorial#listAcademic Timeline
educationQualifications as a ruled descending timeline, year in the margin — the way a CV sets its education block.
education-timeline-01#education#timeline#editorialCampus Cards
educationEach qualification on its own glass card led by the institution — pairs with the card-based projects and credentials.
education-cards-02#education#cards#glassThe Approach
contactThe 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#honestThe Calling Card
contactContact 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#centredThe Brief
contactPick 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#previewColophon
footerAn oversized wordmark clipped by the page edge, over a four-column index and a live local clock.
footer-rich-01#colophon#wordmark#clockThe Rule
footerOne 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#quietThe Sign-off
footerThe 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#oversizedChromatic Aurora
backgroundThree gradient sheets drifting on unrelated periods over a slowly turning iridescent conic base. Pure CSS.
bg-aurora#aurora#css-only#gradientPerspective Mesh
backgroundA 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-onlyDepth Field
backgroundWebGLThree 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#parallaxTopography
backgroundThree 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#lineInterference
backgroundTwo 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#kineticRuled Paper
backgroundA 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-onlyFlow Field
backgroundWebGLA 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