DESIGN MOCKUP Showcase media system — masonry · hover-preview · horizontal home strip · backend manager
Book a call
Work showcase · media system

Every reel shows at its true shape — no more cropping into a 158px box.

Upload a video, we auto-read its real dimensions and grab a poster frame. Vertical reels stay tall, landscape films stay wide, and the gallery packs them into a fluid masonry. Hover plays a muted preview; click plays with sound.

01 · CAPTURE
Auto aspect ratioOn upload we read the video's real width × height and store the ratio — no manual entry.
02 · LAYOUT
Fluid masonryTiles render at their own height. Portrait, square, landscape, cinematic — all uncropped.
03 · PLAY
Hover previewMuted preview loops on hover; click plays with sound. Mobile shows a poster, tap to play.
04 · MANAGE
Studio panelAdd a creative, auto-poster, pick a frame, drag to reorder, toggle showcase — in one place.
/showcase  ·  full gallery

The showcase — a living wall of work

Masonry grid, 4 columns on desktop → 2 → 1 on mobile. Each tile keeps the real aspect ratio of its video. Filter chips narrow by type.

↕
Try it:

Hover any tile — the poster fades to a muted, looping preview with a live “PREVIEW” tag, and a “click for sound” hint appears. The poster you see is the auto-grabbed frame (replaceable in the Studio).

/ home  ·  curated taste

On the home page — a swipeable strip

A single horizontal row of the strongest reels. Scrolls sideways, snaps to each tile, great on mobile. Tiles keep their real shape at a fixed row height.

◄ drag / swipe ►
See the full showcase →
cs-dev /studio  ·  team-only

Managing the media — one Studio panel

Where the team uploads and curates the showcase. Drop a video → it auto-reads dimensions, grabs a poster, and you fill in the details. Drag the list to reorder; toggle what shows.

cs-dev.csoul.cloud/studio EDITOR

Add a creative

Upload a video

✓ skyline-vista.mp4 1080 × 1920 9:16 portrait 0:15 · 12.4 MB
Poster — auto-grabbed

Frame at 0:02. Looks good, or pick another.

⮂ Pick a different frame
Show on showcase  (on by default)

Your showcase — drag to reorder

⠿▶Skyline Vista — walkthroughREEL · 9:16VIDEO9:16
⠿▶Aranya Heights — launch filmFILM · 16:9VIDEO16:9
⠿Amenities — clubhouseREEL · 1:1VIDEO1:1
⠿▶Evening balconyREEL · 4:5VIDEO4:5
⠿Lobby reveal (hidden)STILL · 3:23:2
i
Order = home + showcase order.

The first few flow into the home strip; all “shown” ones fill the showcase masonry. Hidden ones (toggle off) stay in the library but off the public pages.

under the hood

How the data flows

The only new stored field is the aspect ratio. Everything else reuses what already ships.

1 · Upload
Studio reads the video
  • Browser loads the file
  • Reads videoWidth × videoHeight
  • Canvas grabs a poster frame
→
2 · Store
Work collection
  • media — poster (exists)
  • video — MP4 (exists)
  • aspectRatio — new
  • order, showOnShowcase
→
3 · Render
Masonry + scroller
  • Tile gets aspect-ratio
  • No crop — real height
  • Hover = muted preview
MOCKUP · showcase-media-system