Tactile Digital / Deformable UI

Stylegeneral

Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response. Best for Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos.

Jelly buttons chrome clay squishy deformable bouncy physical tactile feedback

#C0C0C0

#FF9ECD

#87CEEB

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Tactile Digital / Deformable UI

Keywords: Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response
Primary colours: Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB
Secondary colours: Glossy highlights, shadow depth, reflection effects, material-specific colors
Effects & animation: Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics
Best for: Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos
Do not use for: Enterprise software, data dashboards, accessibility-critical, professional tools

## Prompt keywords
Design a tactile deformable interface. Use: jelly/squishy buttons, press deformation effect, bounce-back animations, chrome/clay materials, spring physics, haptic-like feedback, material response, 3D depth on interaction.

## CSS / technical
transform: scale(0.95) on active, animation: bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow: inset for press, filter: brightness on press, spring physics (react-spring/framer-motion)

## Implementation checklist
☐ Press effect visible, ☐ Bounce-back smooth, ☐ Material feels tactile, ☐ Spring physics tuned, ☐ Mobile touch responsive, ☐ Reduced motion option

## Design system variables
--press-scale: 0.95, --bounce-duration: 400ms, --spring-stiffness: 300, --spring-damping: 20, --material-glossy: linear-gradient(135deg, white 0%, transparent 60%), --depth-shadow: 0 10px 30px rgba(0,0,0,0.2)

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source