Trellis Data · Homepage redesign · Motion explorations

Trellis Branding Lab

Each concept is a full homepage built on the real trellisdata.com copy, with its own art direction and interaction system. Hover a row to preview it live, click to open.

  1. 01SovereignPrecise, dark, engineered. A product UI that un-tilts as you scroll, cards lit by your cursor, magnetic CTAs.GSAP SplitText · ScrollTrigger · pointer spotlight · ref: Linear
  2. 02LatticeThe trellis is literal: 12k particles shape a lattice, a globe and a shield as you scroll, and bend away from the cursor.Three.js shaders · ScrollTrigger scrub · ref: Three.js / WebGL
  3. 03SignalEcho-led. A live waveform you play with the mouse (or your voice), live transcript with keyword flags, use cases on a horizontal track.Canvas audio viz · optional mic · ScrambleText · pinned horizontal scroll · ref: Percept / editorial
  4. 04EncryptedCiphertext everywhere until your cursor decrypts it. Huge type, a custom cursor with context labels, scroll-filled statements.Cursor lens mask · scroll velocity skew · text scrub · ref: Percept / agency
  5. 05ShowcaseBright product storytelling. A pinned device that changes screens per chapter, stacking product cards, a flickable newsroom.Motion springs · GSAP pinning · Draggable + Inertia · ref: Nanfu
  6. 06RackEngineer-grade. The Trellis symbol rendered in live ASCII that scrambles under the cursor, a stack diagram with data packets, spec sheets and a terminal.Canvas ASCII render · DrawSVG + MotionPath diagram · terminal · ref: Oxide
  7. 07ExplainCalm, serif, thoughtful. A vine grows up a trellis as you scroll; hover any sentence of an AI answer to see the exact source it came from.DrawSVG scroll illustration · hover-linked sources · ref: Anthropic
  8. 08ConvertA B2B landing page built to convert: animated multi-step lead form, proof strip, delivery timeline, sector tabs, FAQ, sticky CTA.Multi-step form · counters · Flip tabs · accordion · ref: Alliance Software
  9. 09CellsBuilt from the brand's cell, core and block elements. A honeycomb that lifts under the cursor, a product hive whose cells push their neighbours, protection rings that lock around a core as you scroll.Honeycomb canvas · hex hive with neighbour physics · scroll lock-in rings · ref: Brand elements
  10. 10MonolithThe real Trellis symbol as a 3D object. Drag to spin it; scroll and it separates into labelled layers of the stack, then locks back together.Three.js extruded SVG · physical material · scroll explode · ref: Oxide × Anthropic
  11. 11GridThe layout grid is the art. A crosshair cursor reads out coordinates, grid cells ripple as you pass, and sector filters reflow the whole page with Flip.Live 12-col grid · crosshair cursor · GSAP Flip re-layout · ref: Swiss / grid systems
  12. 12CognitionIntelligence as a living form. A raymarched liquid-metal body you pull apart with the cursor, morphing from one mind into many agents as you scroll.Raymarched SDF shader · cursor-attracted metaballs · scroll morph · ref: Shape of Intelligence
  13. 13ToneSoft, warm and human. A liquid gradient you stir with the cursor, headline letters that swell as you pass, and each section retunes the colour.Cursor-stirred gradient shader · proximity variable type · palette per section · ref: Byotone
  14. 14GravityLoud, brutalist and playful. The product names fall into a pile you can grab and throw, click anywhere to slap a sticker, a marquee that runs on scroll.Hand-rolled 2D physics · drag and throw · sticker stamps · ref: Unbelievably Crap
  15. 15OrbitEverything in orbit. Products and news ride a 3D ring you drag or scroll to spin, and the cursor sheds a trail of capability tiles.CSS 3D cylinder · drag + wheel inertia · cursor tile trail · ref: Huy Phan vol.2
  16. 16InterceptA homepage you play. Threats rain toward Australia; your cursor is the shield. Score, combos and a defence-level meter turn the security pitch into a game.Canvas mini-game · cursor shield · score + threat HUD · ref: Don't Look Up (game)
  17. 17AgentThe homepage is a conversation with Agentaus. Pick a prompt or type; streamed answers assemble each section of the page as they arrive.Conversational UI · streamed tokens · answers that build the page · ref: L.I.S.A
  18. 18TrainTrained from scratch, literally. Scrolling trains a neural network: signals fire through the layers, the loss curve falls, accuracy climbs, and hovering a node shows its activations.Canvas neural net · scroll-scrubbed training · live loss curve · ref: WeEvolveIt
  19. 19FolioQuiet, editorial, precise. A minimal index where hovering summons rippling WebGL cards, and clicking opens each product with a full-screen transition.WebGL displaced type cards · clip-path page transitions · editorial index · ref: Davide Cattaneo × Boon Global
  20. 20FacetSharp and engineered. A faceted crystal catches light from your cursor, then shatters on scroll into shards that become product cards, over a live data ticker.Three.js low-poly crystal · scroll shatter into cards · live ticker · ref: SharpLink