Case Study pages

Design Portfolio

Indian designer personal portfolio — 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.

Creative Studio

The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.

Design Portfolio

A Melbourne solo UX designer's Framer-built portfolio in a brutalist bracket-wrapped monospace voice — black-on-white chrome punctuated by a single neon-yellow accent, dotted-grid hero, and full-bleed yellow about page.

Design Portfolio

a 3D artist's Framer portfolio that opens on a full-bleed red wall with a colossal magenta FREE FAT FONT "ALINA" wordmark, then drops the volume into clean editorial white-on-near-black case studies set in Satoshi with Times serif accents, the loud act and the quiet act in deliberate tension.

Real Estate

an architecture-led property developer reduced to its barest, most confident form, full-bleed aerial London video on near-black, a single Albertus serif word-pair ("PLACES / PEOPLE"), almost no chrome, and a quiet fade-and-rise motion that lets the buildings carry everything.

Creative Studio

a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.

Developer Tool

a warm ivory-and-slate site where editorial serif typography, a single clay accent, and unhurried 0.8s expo reveals reframe AI as a humanist research practice rather than a product to sell.

Creative Studio

a digital studio's portfolio rendered as a black-canvas magazine - Geist for body, the bespoke "flauta" for display moments, 1920px full-bleed project tiles with no border-radius and no shadows, and a 7-transition motion budget that prioritises bold typography over interaction polish.

Film Production

The reference for boutique NYC production studios — full-bleed video tile mosaic on warm off-white, condensed black serif wordmark, GSAP+Lenis scroll choreography over a soft pastel palette that cycles per section.

Creative Studio

The reference for Paris startup design agencies — Youth chunky-sans display, cream parchment paper, orange ©-superscript wordplay, live Paris clock, Webflow + Lenis + Splitting.js stack.

Creative Studio

a brand-agency site that treats its own logotype as the hero, oversized "BULLET / PROOF" split type and a giant line-drawn B monogram, alternating black and bone-white acts with a Sequel-Sans-plus-Mixta-serif pairing, expo-eased motion and a single orange spark.

Creative Studio

a pure black-and-white studio site with a wicked sense of humour, full-bleed iconic photography, Graphik paired with Times, type that swings up to a 270px display, and self-deprecating copy ("18 fkn Years", "Our Accodlades") that makes monochrome restraint feel warm and human.

Design Portfolio

The reference for desktop-as-portfolio metaphor — Polish multi-discipline designer's case studies presented as macOS-style application icons overlaid on a personal photograph.

Creative Studio

Russian creative-agency portfolio with a 24-column grid, light/dark theme tokens, PPNeueMontreal + PPRightGrotesk pairing, and a leva-driven WebGL/canvas experimentation layer.

Creative Studio

The reference for venture-studio portfolios that flex through monumental condensed type, a single blue I-beam cursor accent, and a venetian-blind slat hero that fragments a single image into a column-rhythmic curtain.

Data Infrastructure

The reference for B2B data-infrastructure: dark navy hero with rainbow data-flow visualization, Inter at four weights, bright Anthropic-blue CTAs over deep `#0e0f18`.

Creative Studio

The reference for tennis-themed boutique creative studios — saturated cobalt-blue `#002bba` field, oversized serif x sans display contrast, baseball-card project credentials, and a heavy GSAP + Lenis + Locomotive scroll choreography over Webflow.

Saas Product

The reference for a 700-million-user product brand at restraint: cream "coconut" backgrounds, one saturated blue CTA, real product UI rendered enormous, and a 13-section page that never raises its voice.

Developer Tool

The reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.

Creative Studio

a Milan "immersive" studio that builds its homepage like a technical drawing, a warm cream canvas with a blueprint grid, mono-everything UI, a giant outlined "dverso" wordmark, and the team rendered as stylised 3D avatars standing inside the letters, with a pixel display font and scramble text for character.

Creative Studio

an award-agency site that runs on contrast, a near-black ink and soft mauve, a grotesque paired with its own mono, type that swings from 11px labels to viewport-filling 130px+ display, a custom loading cursor and horizontal marquees, with a glassy 3D aurora render as the one moment of spectacle.

Saas Product

a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.

Design Portfolio

A solo creative-technologist portfolio styled as a code editor — a "fine-thought.js" filename tab, line-number gutters, a monospace face for 95% of text, and ASCII-art "guide" glyphs forming the entire visual texture of the page.

Developer Tool

the website builder demonstrating itself - a dark, bento-led showcase built in Framer and animated by Framer Motion, where the site IS the product pitch.

Creative Studio

Award-winning creative agency "Designing Future" — Instrument Serif + Suisse Int'l Book editorial pairing, Webflow + GSAP + ScrollTrigger + Swiper stack, AI & ML capability section.

Creative Studio

Self-aware "this might be a design studio" hero on near-black with vivid red display + rainbow-bordered chrome — WordPress+Elementor post-modern creative aesthetic.

Film Production

Film production company WordPress + Elementor Premium-Addons stack — Bebas Neue + Anton + Poppins + Roboto display fonts, 60-keyframe motion library, hot-pink accent, Vimeo embeds.

Hr Platform

The reference for friendly HR/recruiting platforms with chunky 70s-display typography — warm cream + brown text + saturated CTA, real product UI in hero, pink customer-love mode-flip.

Creative Studio

a black-canvas, Monument-Grotesk agency site that turns brutalist restraint into confidence, sharp corners, one type family, vast empty space, then detonates a few hot-pink and acid-green colour blocks and lets Lenis-smooth scroll reveal the work.

Creative Studio

The reference for cinematic creative-studio portfolio — PSTimes serif + Helvetica Neue on monochrome black/light-grey, 2088px wide container, JS-driven preloader hides content until reveal.

Marketing Platform

The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.

Agency Home

the home brand - Jiffi's own site, a punchy "chaos to clarity" tech-agency story told through GSAP-driven scroll motion, the Simula + Satoshi type system and the navy/blue/yellow palette.

Creative Studio

The reference for global brand-agency studios — yellow logomark on near-black, four custom typefaces, live UTC clock chrome, split-screen sticky-text case study reveals.

Trades

a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.

Hr Platform

The reference for HR/People platforms with rainbow-gradient personality — deep teal text on cream, pastel feature cards, multi-coloured wave logo, Matter at fractional rem-math sizes.

Creative Studio

The reference for Japanese motion-heavy creative studios — a near-black SvelteKit canvas, a serif-led type system anchored on `ambroise-francois-std`, a Pixi.js WebGL layer, and a slow Lenis-driven loader that turns the entry into a performance.

Creative Studio

a gallery-minimal brand-studio portfolio where a near-white canvas, one large black-and-white image and a tiny "Explore ↓" are the entire first screen, image carries everything, type whispers, and a single classic link-blue is the only colour.

Creative Studio

French multidisciplinary studio that uses a totally achromatic black-on-white chrome and lets 3D render film carry every drop of colour, with cinematic 0.45s easeOutExpo transitions and a small cat-head logomark floating in a dark pill nav.

Creative Studio

The reference for international boutique studios — bold red background, royal-blue L'Étude wordmark overlaid on photography, SvelteKit + Sanity + Lenis stack, draw-in logomark animations.

Developer Tool

the restraint benchmark - a dark, near-monochrome product site where one indigo accent, crisp 0.16s motion and an animated dot-grid do all the work, and nothing is wasted.

Design Portfolio

Sergey Lisovskiy's personal designer site — floppy-disk hero illustration + intentionally scrambled-letter headlines + single 43.2px Apfel Grotezk + SvelteKit.

Creative Studio

The reference for cinematic Montreal creative studio — black preloader with serif logo, Lenis + Locomotive Scroll stack, Lisa AI assistant integration, emoji-heavy section labels.

Saas Product

a post-Atlassian-acquisition SaaS site (now branded "Atlassian Loom") built in Next.js, set in Atlassian's Charlie Text + Charlie Display, anchored by a single Atlassian-blue `#1868db` CTA and a hero video thumbnail that doubles as the product demo - the canonical reference for "absorbed-by-enterprise SaaS that still feels like itself."

Marketing Platform

The reference for editorial-serif email platform — cream + black + classic article underlines, Framer page builder, AI agent sub-product positioning.

Marketing Platform

a post-Intuit-acquisition Mailchimp site where the iconic Cavendish-yellow `#ffe01b`, the dark-teal `#004e56`, and the Freddie chimp mascot all survive intact - now paired with Graphik Web for body, Means Web for serif accents, and a springy overshoot cubic-bezier (`0.5, 2.5, 0.7, 0.7`) at 0.3s that gives every interaction its characteristic bounce.

Health

a women's and family telehealth brand that wraps clinical credibility in warmth, a deep forest green base lit by an electric mint accent, Helvetica Now Display set huge with Ivar Display serif italics for the emotional words, and warm candid family photography carried full-bleed.

Other

A 100+ year, employee-owned national commercial builder that projects quiet authority at scale - full-bleed video and aerial photography of real megaprojects, oversized condensed type ("SUPERIOR RESULTS", "WE CAN BUILD IT"), a single bold red accent, and clip-path scroll reveals that feel cinematic but never showy.

Fintech

a banking site that turns scale and aspiration into the brand - bespoke variable Arcadia/ArcadiaDisplay typography at intermediate weights (420/480), a glass-blur dark nav over a 1952px-wide light page, atmospheric mountain/space photography, and one electric-indigo CTA in a sea of refined neutrals.

Saas Product

The reference for QuickBooks-niche B2B CRM — clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.

Film Production

a VFX studio reel built as one giant black canvas where Mux-streamed clips hang in space, tiny 14px labels float at the edges, and a thumbnail filmstrip pinned across the bottom lets you scrub the whole body of work like a video timeline.

Marketing Platform

The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.

Creative Studio

The reference for warm-neutral boutique UX/UI studios — handwritten signature mark, cream-and-stone palette, restrained editorial type, horizontal-scroll-pinned case study reveal on an otherwise calm vertical page.

Film Production

Los Angeles commercial production company portfolio — cream `#fcfaf5` light theme over pure black dark theme, ATF Alternate Gothic Condensed + Fixture grotesque, header-fixed live LA clock, narrow centred 9-tile project grid, and a `mix-blend-mode: difference` H1 that inverts as it crosses the hero image.

Type Foundry

a type-foundry-and-design-studio site whose signature is a "Type-Toggle", the entire page can be re-rendered in any typeface from their own collection, wrapped around a tight, gridded flat-lay portfolio in black, white and one electric yellow.

Creative Studio

The reference for Ukrainian award-show creative studio — bespoke serif on pure black, percentage-counter preloader, 1.6s cinematic transforms, polarised type scale.

Creative Studio

a digital-experience studio that builds its homepage like one of its products, a fixed, gridded "operating system" screen on an off-white grain canvas, where an iridescent 3D ODC logo, a big Roobert headline, a single yellow block and live Mux video tiles sit inside hairline-ruled frames and move with spring physics.

Film Production

The reference for terminal/CLI-inspired creative studios — PPSupplyMono single-font, black + white + terminal-green palette, cursor-blink animations, 14-network-request page weight, 14-section editorial density.

Creative Studio

The reference for legendary multi-discipline design firms — filter-first home with sentence-form UI, work-grid-as-background, Plain sans, GSAP motion, 1728px wide canvas.

Creative Studio

A London and Auckland creative-technology agency site that runs almost entirely on background video, with mono-typed system chrome and a single 14px corner radius as the only ornament — confident silence between motion.

Creative Studio

A Framer-built creative studio site where Inktrap display type, monochrome pure-black canvas, and large geometric SVG portals (tracks, wells, vortexes) carry the entire brand: a "creative gateway" rendered as actual gateways on every scroll.

Film Production

a film and commercials production studio that runs a single enormous "POSTER" wordmark in Monument Extended across the top, a full-bleed showreel still behind it, and a dense ticker of project credits set in Azeret Mono along the bottom, with default-blue (#0000EE) links breaking the monochrome.

Creative Studio

The reference for cult London branding agencies — Grit serif paired with ABC Diatype Expanded, near-black `#181F1F` on soft mint surfaces, fat 40-64px radii, and a video-saturated 11774px scroll that lets the work do the talking.

Creative Studio

A one-person Korean web agency portfolio that signals craft through massive 230px display type, a forest-green dark band, and a single recurring grayscale humanoid as motif — minimalism with one strong visual punch.

Creative Studio

The reference for serif-display motion-creative agency sites — cream `#F9F8EE` paper, serif/grotesk hybrid wordmark, sticker-style organic shapes, and a fixed top chrome that morphs the brand tagline letterforms.

Film Production

A Southern African film production studio site that pits a bespoke shattered-slab display logomark against full-bleed film stills and a heavy WebGL/GSAP/Lenis motion stack to make the homepage feel like a 60-second commercial reel rather than a marketing page.

Design Portfolio

The reference for award-winning single-developer creative portfolios — pure black canvas with a glowing red ninja-creature logomark, glitch-text keyframes, single-font Adobe Typekit minimalism.

Real Estate

a real estate brokerage platform that reads like a confident B2B SaaS site: Poppins throughout, a plum-grey ink (#373342) with a plum-pink primary (#CE87C1) and a rust-red highlight, documentary agent photography and big "Own Your Future" display type.

Film Production

The reference for boutique film-production studios — cream-on-black cinematic intro, three-typeface display system (heavy condensed display + romantic serif + neutral sans), and a Three.js / lil-gui WebGL canvas wrapped in a tutorial-led intro experience.

Saas Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.

Creative Studio

The reference for Swedish performance-marketing agencies that lead with creative rather than media-buying — pure-black canvas, oversized SOSCALE wordmark hero, lavender pill CTA, and a Webflow + GSAP + Lenis motion stack borrowed wholesale from the global studio scene.

Design Portfolio

a front-end developer's portfolio that proves its own craft, a near-black WebGL HUD where a giant outlined "stAbondAr" wordmark, a scattered field of numbered coordinate points and decode-scramble text move under Neue Machina type and a single hot red, all built, fittingly, on Astro.

Creative Studio

The reference for Quebec creative studios with Swedish-umlaut wordmark — cream paper + chili-orange accent + 150px hero + 40-section density + Framer Motion + Lenis stack.

Fintech

the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.

Creative Studio

Pure-black editorial portfolio for a culture-shaping design studio, anchored by an uppercase serif display headline, four-pole nav chrome with a diacritic-stroke logomark, and a 2x2 grid of category-tagged case study tiles separated by hairline white rules.

Creative Studio

A craft-led digital studio's portfolio where the preloader is the brand statement — blue gradient + film grain + serif/sans clash + tiny mono chrome, then the page loads.

Design Portfolio

A Vietnamese solo-designer portfolio that leans hot magenta and ultra-bold display caps against near-black, then lets a Framer-driven motion stack push huge type, pinwheel graphics, and chromatic-aberration footer effects across a 21,000px scroll.

Creative Studio

The reference for Sydney creative-agency portfolios — near-black canvas, single-headline hero with a tiny "Scroll to explore" indicator, then a tile-grid case study reel and a chromatic-aberration ROIdeas display moment.

Design Portfolio

Anton Tvinenko's designer portfolio — Readymag + Three.js + Win98 loader nostalgia, Druk Condensed + Japanese system font, retro-web aesthetic.

Saas Product

The reference for course-platform brands with editorial serif + neon-yellow CTA — Ivy Presto Headline at 75px, integration illustration with portrait centre, 150,000 creators trust signal.

Editorial Publishing

The reference for editorial design publications — centred italic-serif wordmark, light-grey paper background, mixed Times-serif body + Bauhaus-sans chrome, content-density home grid.

Creative Studio

The reference for "anti-advertising" agency sites that weaponise chaos — zodiac-named nav, draggable physics-pill bubbles, colour-blocked viewport sections, and four foundry display faces stacked into a deliberately overstuffed, irreverent identity.

Creative Studio

A bicoastal independent creative house (LA + Montréal) whose site is built around one monumentally oversized custom display face (TuxPlaza at ~223px), a chrome-grey blurred-pill top nav, and full-bleed cinematic Vimeo case study reels — motion-heavy creative portfolio at indie-craft tier.

Design Portfolio

Minimal duo-studio portfolio — single-font BL Melody on white, Nuxt + Sanity stack, playful 404 messaging ("Even as a duo, we can't find this one").

Creative Studio

The reference for boutique hospitality-PR agencies — warm off-white canvas with deep navy ink, oversized American Grotesk Compressed display headlines, polaroid-style photo collage hero, and a soft Lenis-smoothed editorial rhythm.

Saas Product

The reference for a butter-cream voice-AI brand at peak typographic confidence — EB Garamond serif hero on lavender-and-evergreen surfaces, with curved-path transcript animations as the signature motion.

Film Production

Comedy film production company portfolio — cream paper + slate-blue near-black + red accent, GSAP+ScrollTrigger, 270px hero, "noise" film-grain keyframe.

Film Production

a playful production company built entirely in olive-and-lemon, where a spinning sliced-lemon preloader, a winking eye logo and a thumbs-up cookie notice set a deliberately silly tone over a tight monospace-plus-serif type system, animated wall-to-wall with GSAP and ScrollTrigger.

Other

A San Francisco civil/heavy construction contractor that wins federal, state and municipal trust by showing the hard jobs it has handled - a green-and-gold canvas over Golden Gate / Bay infrastructure photography, a "Challenges We've Overcome" checklist, a public-works project grid and a Caltrans engineer's testimonial.

Creative Studio

a Melbourne and Sydney creative agency that runs warm off-white pages on an eight-column grid, sets everything in the Greed grotesque from 22px body up to a 250px hero, anchors the work in oversized numbered category headers ("Science & Innovation", tagged 20) and floats a blurred pill nav while a custom cursor and a soft 3D blob carry the personality.