CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/neon-phone-stack

Neon Glass Phone Stack

Several mobile screenshots float inside transparent neon phone frames, fanned out in a translucent stack. Outlines pulse left-to-right in a swipe-like wave and the whole stack bends gently with the cursor.

ReactWebGL3DImageInteractiveFont#three#3d#phone#neon#mobile#ugc#social#glass#vertical

Usage

import NeonPhoneStack from '@crazygl/hero-neon-phone-stack';

export default function Page() {
  return (
    <NeonPhoneStack
      heading="Built for the feed."
      screenshot1="https://crazygl.com/samples/screenshot-phone-dark-A.avif"
      phoneSpread={2.85}
      outlineColor1="#56e3ff"
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom) with heading + subheading or your own nodes.
  • Phone media — screenshot1–screenshot5 (image or short video; vertical 9:19.5 crops fit best, others cover-fit).
  • Stack — phoneSpread, mainScale, phoneSizeReduction, depthOffset shape the fan.
  • Frame — per-phone outlineColor1–5, outlineIntensity, outlineWidth, bodyTransmission (screen transparency), screenEmissive.
  • Animation — swipeEnabled, swipePeriod, swipeBoost drive the swipe pulse.
  • Atmosphere — gridEnabled / gridColor / gridIntensity, haloStrength, bgTop / bgBottom, transparentBackground.
  • Motion — parallaxStrength and bendStrength for pointer response.

Best for

  • Mobile-first and consumer app launch pages.
  • Social, UGC, and short-form video tools.
  • AI consumer apps and creator products.
  • Any brand whose story really lives on a phone screen.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-neon-phone-stack
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 NeonGlassPhoneStack from '@crazygl/hero-neon-phone-stack';

export default function Landing() {
  return (
    <NeonGlassPhoneStack />
  );
}
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 NeonGlassPhoneStack from '@crazygl/hero-neon-phone-stack';

export default function Page() {
  return (
    <section>
      <NeonGlassPhoneStack
        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

Vertical Video Feed Spiral

Vertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with depth. Tiles spawn offscreen below and despawn offscreen above with a soft edge fade. Hover a tile to pause and focus it.

Vertical Phone Screenshot With 3D Depth

A mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages.

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.

Product in Liquid

A product floats suspended inside a thick, slowly churning liquid blob that genuinely refracts it. Tinted glass, chromatic dispersion, drifting bubbles and crawling caustics give a sensual, premium feel.

Retro-Future Product Tunnel

Your screenshot or video sits at the centre of an 80s sci-fi tunnel — stacked rings of glowing colour flow toward the camera against deep black. Energetic, fun, memorable.

Infrastructure Stack Tower

A 3D tower of translucent labelled slabs — CDN, Edge, API, Services, Database, Storage — that assemble tier-by-tier from the ground up, each slab settling with a soft physics-ish bounce. Thin glowing seams, real PhysicalMaterial transmission, PMREM HDRI lighting, pointer parallax. For high-end cloud / platform / infra-as-code landing pages.Live customizer

Neon Glass Phone Stack

Phone 1 (main)Image or short video. Vertical (9:19.5) crops fit best.Phone 2Phone 3Phone 4Phone 5Phone spread2.85How far the secondary phones fan out from the main phone.Phone size reduction0.15How much smaller each adjacent phone is. 0 = all same size, 0.15 = each step is 15% smaller.Main phone scale1.3Depth offset1.2Z-depth between layers.Outline 1Cyan — main phone outline.Outline 2Hot pink — second outline.Outline 3Purple — third outline.Outline 4Mint — fourth outline.Outline 5Amber — fifth outline.Outline intensity1Brightness multiplier for the outline glow.Outline width0.18worldHow far the neon glow extends outward from the phone silhouette.Screen transparency0.3Screenshot transparency. 0 = fully opaque screenshot, 1 = fully transparent.Screen brightness0.7Brightens the screenshot — values above 0 push the colors brighter.Swipe waveSwipe period4.6sSwipe boost4Outline brightness multiplier during the swipe pulse.Parallax gridGrid colorGrid intensity0.18Halo strength0.74Background topBackground bottomTransparent backgroundPointer parallax0.55Bend strength0.5How much each phone leans toward the cursor.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.