skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-panel-float-z

Generate 3D UI mock cards with parallax effects from JSON parameters.

6|1|Updated May 29, 2026
Search Tags:#ui design#motion graphics#parallax#ui mockup#3d effect
One-click install
npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill ui-panel-float-z
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-panel-float-z
Source: https://github.com/gooseworks-ai/gooseworks-ads-skills/tree/main/skills/atoms/motion-graphics/effects/ui-panel-float-z
Command: npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill ui-panel-float-z

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill generates realistic UI mock cards with depth cues and parallax effects, helping to visually represent a product in a more engaging and realistic manner.

Core Features & Use Cases

  • 3D Depth Cues: Achieves a 3D tilt effect with subtle 3D tilt and parallax drift.
  • Parallax Effects: Adds continuous parallax drift for an immersive experience.
  • Customizable UI Mock Card: Users can input their own React/HTML content and customize various properties like size, tilt, and shadow.
  • Use Case: Ideal for creating product demos, showcasing UI designs in a dynamic way, and enhancing visual presentations.

Quick Start

Generate a 3D floating UI mock card with a width of 720px and a height of 1080px, using the content: "<Your UI content here>".

Frequently Asked Questions about ui-panel-float-z

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create 3D floating UI mock cards with parallax effects?▼

You create 3D floating UI mock cards by inputting your React or HTML content and defining JSON parameters for panel dimensions, tilt, shadow, and parallax drift. The Skill uses CSS and JavaScript to render depth cues and continuous parallax animation for immersive product demonstrations.

Can I use my own React or HTML content inside the 3D UI mock card?▼

Yes, you can input your own React or HTML content into the customizable UI mock card. You can define the content string alongside JSON parameters for size, tilt, and shadow to render your specific UI design within the 3D parallax environment.

What properties can I customize for 3D depth cues and tilt effects?▼

You can customize 3D depth cues and tilt effects using JSON parameters for panel dimensions, tilt angles, shadow properties, and parallax drift. These properties control the CSS and JavaScript rendering to achieve the desired 3D visual presentation.

Does this parallax UI mockup tool work for product demonstrations and UX visualizations?▼

Yes, the parallax UI mockup tool is specifically designed for product demonstrations and UI/UX design visualizations. It generates realistic 3D UI mock cards with depth cues and continuous parallax drift to visually represent products in a more engaging manner.

What's the best way to showcase UI designs with 3D depth and motion graphics?▼

The best way to showcase UI designs with 3D depth and motion graphics is to generate a floating UI mock card with continuous parallax drift. By applying a subtle 3D tilt and shadow parameters, you can visually represent your product dynamically without manual CSS animation.

Related Skills

Explore More Design & Creative Skills→
gooseworks-aigooseworks-ai
6

card-tilt-drift

Simulate physical card tilt and drift effects in React and Remotion motion graphics.

Official
Advanced
efekrbasefekrbas
41

antigravity-design-expert

Design immersive web interfaces with glassmorphism, spatial depth, and motion-driven presentation.

Community
Advanced
lostsock1lostsock1
1

motion-designer

Guide motion designers through Disney's 12 principles for expressive animations.

Community
Intermediate
fyunusafyunusa

lightweight-3d-effects

Create pseudo-3D illustrations, WebGL backgrounds, and parallax tilt effects.

Community
Intermediate