arca-ui

Aspect Ratio

Paper-framed containers with chromatic projections that maintain consistent proportions.

16:9 Widescreen

Abstract white paper texture

Perfect for video thumbnails and hero images.

Video Player

Video thumbnail

Introduction to Paper Cut Design

12.4K views 8:24

Card with Image

Workspace with laptop
Design

Creating Paper-Cut UI Designs

Learn how to create beautiful paper-cut style interfaces that feel warm and inviting.

Dec 15, 2024 5 min read
Product watch

Minimalist Collection

Classic Timepiece

$299

Social Media Post

papercut_design

Tokyo, Japan

Tokyo street

2,847 likes

papercut_design Exploring the streets of Tokyo. The blend of traditional and modern architecture is simply breathtaking.

Profile Header

Mountain landscape
Profile

Alex Chen

@alexchen_design

UI Designer & Developer. Creating beautiful interfaces with Paper Cut aesthetics. Based in San Francisco.

1.2K followers348 following89 posts

4:3 Standard

For medium-sized cards, use outlined frame to avoid disproportionate shadow.

Minimal desk setup

Classic ratio for photos and product images.

1:1 Square

Small square cards work best with outlined or no shadow.

Abstract geometric art

Ideal for profile pictures and social media posts.

21:9 Ultra-wide

Mountain landscape panorama

Great for cinematic banners and panoramic views.

3:4 Portrait

Portrait photo

Perfect for portrait photography and mobile-first content.

Responsive Grid

Compare different aspect ratios side by side. For grids with mixed ratios, use outlined frames to maintain visual consistency.

1:1
4:3
16:9

Different aspect ratios displayed in a responsive grid layout.

Frame Variants

Choose the appropriate frame style based on container size.

Elevated

Strong shadow + lift. For large hero images.

Elevated Frame

Default

Medium shadow + lift. For general containers.

Default Frame

Outlined

Border at rest, subtle lift on hover. For dense layouts and grids.

Outlined Frame

API Reference

AspectRatio component with Paper Cut frame variants.

AspectRatio Props

PropTypeDescription
rationumberWidth/height ratio (e.g., 16/9)
variant"elevated" | "default" | "outlined" | "flat"Frame elevation level
liftbooleanEnable/disable lift interaction (defaults to on except flat)

Frame Variants

VariantShadowUse Case
elevatedStrong + liftLarge hero images
defaultMedium + liftGeneral containers
outlinedBorder + subtle liftSmall cards, dense layouts
flatNoneNested inside elevated containers