CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/draggable-portfolio-cards

Draggable Portfolio Cards

Portfolio cards float behind the headline and can be dragged with momentum, making the hero feel tactile and playful.

ReactWebGL3DImageInteractiveFont#three#3d#screenshot#stack#cards#saas#templates#dashboards#modules#editorial#portfolio

Usage

import DraggablePortfolioCards from '@crazygl/hero-draggable-portfolio-cards';

export default function Page() {
  return (
    <DraggablePortfolioCards
      heading={"A stack you\ncan explore."}
      card1Image="/shots/dashboard.avif"
      cardCount={5}
      cursorTilt={0.7}
    />
  );
}

Customise

  • Content — contentType, heading, subheading, or custom nodes.
  • Screenshots — card1Image–card5Image (your real product shots; ~16:9 reads best).
  • Stack — cardCount (2–6), cardSize, cardCornerRadius, groupOffsetX/Y.
  • Motion — cursorTilt (pointer parallax), ambientFloat (idle bob).
  • Style — edgeGlowColor / edgeGlowStrength, shadowStrength.
  • Lighting — keyColor, fillColor, screenBrightness (emissive boost on the screenshots).
  • Background — bgTop / bgBottom.

Best for

  • Product studios and agency portfolios showing several screens at once.
  • SaaS launch pages cycling through dashboards, builders, and editors.
  • Template or theme marketplaces with a gallery of previews.
  • Editorial showcases wanting a tactile, playful first impression.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-draggable-portfolio-cards
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import DraggablePortfolioCards from '@crazygl/hero-draggable-portfolio-cards';

export default function Landing() {
  return (
    <DraggablePortfolioCards />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import DraggablePortfolioCards from '@crazygl/hero-draggable-portfolio-cards';

export default function Page() {
  return (
    <section>
      <DraggablePortfolioCards
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Cinematic Contact Sheet

Multiple frames behave like a cinematic contact sheet, bending through depth and holding a warm editorial mood.

Screenshot as a 3D Card Stack

Your main product screenshot sits on top of a stack of secondary UI cards. The front card swoops up and over to the back at a configurable interval, autonomously cycling through every screen. Soft drop shadows, a cyan edge glow on the top card, cursor parallax tilt.

App Screenshot Fan Stack

Your product screenshots pop up from below and arrange in a soft fan — every few seconds the lead card drifts away and the next slides forward in a smooth, looping reveal.

Collage in Zero Gravity

Images, textures, and product screens float together in a controlled zero-gravity collage around the hero copy.

Torn Poster Hero

Layered torn posters build a premium campaign collage with depth, shadows, and a subtle peel-away motion.

Magazine Cover Product Hero

A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth.Live customizer

Draggable Portfolio Cards

Card 1 imageThe image shown on the first card.Card 2 imageCard 3 imageCard 4 imageCard 5 imageCard count5Stack offset X0.11How far each card sits to the right of the one above it (resting).Stack offset Y0.07How far each card sits below the one above it (resting).Stack offset Z0.04Spacing between cards along the depth axis. Larger = the stack is taller.Card size2.4World-units width of the cards. Larger = the stack fills more of the canvas.Group offset X0.85worldHorizontal position of the whole card stack. 0 = centered.Group offset Y0worldVertical position of the whole card stack. 0 = centered.Corner radius0.07relCursor tilt0.7Strength of the pointer-driven parallax tilt. 0 = no tilt.Ambient float0.35Gentle continuous bob of the whole stack so it never reads as a static screenshot.Edge glow colorEdge glow strength0.5Card shadow strength0.55Opacity of the soft shadow each card casts on the one below.Key lightFill lightScreen brightness0.4Emissive boost on each card's screenshot. 0 = unlit, 1 = self-illuminated.Background topBackground bottomHeading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.