GoodCase.aiAI News · Radar↗AI Map↗Course · LearnPrompt↗
ProjectsGoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
GoodCase.ai
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Projects

AI News · Radar ↗AI Map ↗Course · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Loading…

GoodCase.ai · AI Prompt Case Collection
DSH PluginsChangelogFeedback
ModelsCreatorsSeedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKlingQwen ImageGPT Image 1.5MiniMax H3

3D Invoice Printer SaaS Component

Creator · uxsweta

AI Coding (UI)XAdded 07/28/2026Independently retested#web#human-reviewed
More tags (4)
#web-ui#motion-3dAI UI BuilderGPT-5.6 Sol
View original source ↗
Source ♥ 32

Prompt

The reproduction prompt keeps the original and adds runtime, asset and acceptance requirements. These additions are not the author’s words.

Few people asked for the prompt, so here it is 👇

PS: Tweak it based on your use case.

Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic.

Visual Design

- Design a wide, horizontal invoice printing machine inspired by receipt printers, but with a futuristic and clean appearance.
- Use subtle gray strokes, soft shadows, and minimal details.
- The machine should feel premium, lightweight, and modern rather than realistic or industrial.
- Keep the overall design clean enough to fit inside a dashboard or landing page hero section.
- Add a single prominent "Print Invoice" button directly on the machine.

Animation

When the user clicks the "Print Invoice" button:

- The machine should react with a subtle press/click animation.
- A receipt should gradually emerge from the printer slot.
- The receipt must animate smoothly from inside the machine to outside, giving the impression that it is being physically printed.
- The animation should feel realistic, fluid, and satisfying.
- The receipt should slide out line-by-line rather than appearing instantly.
- Add slight motion easing and subtle paper movement for realism.

Receipt Design

The receipt should remain highly minimal and editable.

Do NOT fill it with complex customer information.

Use placeholder content such as:

Customer Name

Product

Total Amount

The receipt should look like a clean invoice preview rather than a detailed bill.

Interaction

- The receipt should be hidden initially.
- It should only appear after clicking the Print Invoice button.
- The animation should be repeatable every time the user clicks the button.
- Include smooth transitions and micro-interactions throughout.

Style References

Apple-style minimalism
Linear / Stripe design quality
Premium SaaS dashboard aesthetic
Soft gray strokes
Clean typography
Modern 3D illustration
High attention to interaction details

Goal:
Create a delightful visual experience where users feel like an invoice is actually being generated and printed from a beautiful 3D machine, rather than simply appearing on the screen.
≡Provenance · verifiedPublished prompts are human-checked against the original post; platform-reconstructed prompts are not accepted.Compare with source ↗

Models & stability

Recommended models

AI UI BuilderGPT-5.6 Sol
Stability
86 / 100
Cost
Medium
Related Skills3D and motion hero ↗Product and commerce conversion page ↗

Independent retest evidence

See what the same prompt generated in our test.

Retest output · not the creator's original
UIGenerated evidenceAI judged

gpt-5.6-sol

Aug 9, 2026

Retest score78.3
Desktop captureGenerated desktop UIMobile captureGenerated mobile UI
Download generated HTML ↓
claude-sonnet-5 · 64.1gpt-5.6-sol · 92.5gap · 28.4
  • Same model family as recommended (AI UI Builder / GPT-5.6 Sol). Settings the creator used beyond the prompt are not known.
  • The retest score is the mean of two AI judges (0–100) for this single generation. No person has reviewed it, and it is not a success rate.

Independent reproductions

1 person reproduced this prompt with their own work.

Reproductions · not the creator's original
卡尔
Reproduced by卡尔
Oct 15, 2026
Reproduction by 卡尔Open reproduction ↗
glm-5.3

GLM-5.3 单次生成;Codex 人工修复运行依赖、必要源码及移动布局,未重新生成。桌面/手机真实渲染和资源检查通过;完整功能与视觉还原尚未全部验收。源码、截图和修复记录见复现出处。

Reproduction source ↗

Keep exploring

Explore related cases.

View all AI Coding (UI) Case →
Digitwist AI Builder
AI Coding (UI)MotionSitesAdded 08/19/2026

Digitwist AI Builder

Dark hero for an AI site builder, with dependencies pinned down to the version of motion. The specific use of the animation library is the main point of interest.

Skill · 3D and motion heroSkill · Product and commerce conversion page

Prompt

Create a dark mode hero section for an AI website builder with the following exact specifications: ## Technical Setup ### Required Packages Install these packages: - `motion` (version 12.23.24 or later) - for animations - `hls.js` (version…

Source heat · MotionSites
—
Stability
88
View case →
CodeNest Coding Platform
AI Coding (UI)MotionSitesAdded 08/19/2026

CodeNest Coding Platform

Dark hero for a coding education platform, with a numbered spec that fixes everything from background layout to responsive breakpoints and leaves no room for improvising. Useful for learning how to turn a design mockup into an executable spec.

Skill · Product and commerce conversion pageSkill · Web section recreation spec

Prompt

Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications: 1. Background & Layout: Background: Implemen…

Source heat · MotionSites
—
Stability
79
View case →
SAAS Software
AI Coding (UI)MotionSitesAdded 08/13/2026

SAAS Software

Fully responsive hero for the PR agency SaaS Convix on a light background, with the page frame starting from the class names of the outer wrapper.

Skill · Product and commerce conversion pageSkill · Web section recreation spec

Prompt

Build a fully responsive, full-viewport hero section for a PR-agency SaaS called "Convix Software" with these exact specs: Page Frame Outer wrapper: min-h-screen w-full bg-[#ededed] p-3 sm:p-4, font-family Inter Hero container (clips every…

Source heat · MotionSites
—
Stability
93
View case →

Each detail page keeps the original result, the prompt, and retest evidence in one reading path.