Prompt Motion
@AiMotionSiteS
Prompt library

UI motion

Production-quality Orbit landing page with detailed SaaS product UI

Production-quality Orbit landing page with detailed SaaS product UI is a 53-second Claude Opus motion design reference by @itsluneri, built around CSS. [Note: the creator shared a partial prompt. Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.

@itsluneriView post

Prompt

[Note: the creator shared a partial prompt. Wording below is theirs.] GOAL: Build a complete, production-quality landing page for Orbit, a project management platform for small product teams. MOTION: Orbit combines projects, tasks, discussions, documents, and weekly progress updates in one workspace. Its core purpose is to let teams understand what is happening without constantly asking for updates or scheduling status meetings. Technical requirements Build the website using Next.js, React, and TypeScript. Use TSX components and a proper Next.js project structure. Do not create a plain HTML/CSS website. The implementation should be clean, componentized, responsive, and production-quality. Use modern CSS or Tailwind CSS for styling where appropriate. Do not merely describe the implementation. Build the complete working page. Visual reference Use the provided reference image as the primary art-direction reference. Match its overall visual character very closely: typography treatment, density, spacing philosophy, texture, contrast, borders, surface treatment, visual weight, image treatment, and general design atmosphere. However, do not copy the reference website or recreate its content. Do not copy its: branding text or copy logos illustrations exact layout individual components imagery proprietary visual assets Instead, understand the design language behind the reference and reinterpret it for Orbit. For example, if the reference uses grain, paper texture, sharp borders, muted surfaces, unusual typography, dense layouts, editorial spacing, or a particular treatment of imagery, use those qualities as inspiration while creating an original design. The finished page should clearly belong to the same visual world as the reference while still being an original website. Page The hero should immediately explain Orbit and show a convincing view of the actual product. Throughout the page, create realistic Orbit UI showing projects, tasks, assignees, discussions, documents, statuses, deadlines, and weekly updates. Include the sections that genuinely help sell the product, such as: Hero Product demonstration Core workflow Features Team use cases Integrations Customer proof Pricing FAQ Final CTA You may change, combine, reorder, or remove sections when doing so produces a stronger page. Design quality Avoid the stereotypical AI-generated SaaS aesthetic. No purple gradient hero. No glowing blobs. No glassmorphism. No giant collection of rounded cards. No endless 3-column feature grids. No random floating icons. No meaningless charts. No fake AI functionality. No excessive pills. No generic startup illustrations. No repetitive centered sections. Do not make every element a card or container. Use typography, composition, whitespace, texture, product UI, imagery, and hierarchy to create visual interest. The product UI itself should be detailed and believable. Keep names, projects, dates, statuses, and other information consistent across different product previews. Copy should be concise and specific. Avoid ph
Author original
Build a complete, production-quality landing page for Orbit, a project management platform for small product teams. Orbit combines projects, tasks, discussions, documents, and weekly progress updates in one workspace. Its core purpose is to let teams understand what is happening without constantly asking for updates or scheduling status meetings. Technical requirements Build the website using Next.js, React, and TypeScript. Use TSX components and a proper Next.js project structure. Do not create a plain HTML/CSS website. The implementation should be clean, componentized, responsive, and production-quality. Use modern CSS or Tailwind CSS for styling where appropriate. Do not merely describe the implementation. Build the complete working page. Visual reference Use the provided reference image as the primary art-direction reference. Match its overall visual character very closely: typography treatment, density, spacing philosophy, texture, contrast, borders, surface treatment, visual weight, image treatment, and general design atmosphere. However, do not copy the reference website or recreate its content. Do not copy its: branding text or copy logos illustrations exact layout individual components imagery proprietary visual assets Instead, understand the design language behind the reference and reinterpret it for Orbit. For example, if the reference uses grain, paper texture, sharp borders, muted surfaces, unusual typography, dense layouts, editorial spacing, or a particular treatment of imagery, use those qualities as inspiration while creating an original design. The finished page should clearly belong to the same visual world as the reference while still being an original website. Page The hero should immediately explain Orbit and show a convincing view of the actual product. Throughout the page, create realistic Orbit UI showing projects, tasks, assignees, discussions, documents, statuses, deadlines, and weekly updates. Include the sections that genuinely help sell the product, such as: Hero Product demonstration Core workflow Features Team use cases Integrations Customer proof Pricing FAQ Final CTA You may change, combine, reorder, or remove sections when doing so produces a stronger page. Design quality Avoid the stereotypical AI-generated SaaS aesthetic. No purple gradient hero. No glowing blobs. No glassmorphism. No giant collection of rounded cards. No endless 3-column feature grids. No random floating icons. No meaningless charts. No fake AI functionality. No excessive pills. No generic startup illustrations. No repetitive centered sections. Do not make every element a card or container. Use typography, composition, whitespace, texture, product UI, imagery, and hierarchy to create visual interest. The product UI itself should be detailed and believable. Keep names, projects, dates, statuses, and other information consistent across different product previews. Copy should be concise and specific. Avoid ph

Questions

What is this ui motion prompt for?

It is a Claude Opus motion design brief for “Production-quality Orbit landing page with detailed SaaS product UI”. Paste it into Claude and keep the timings already written in the prompt.

Where is the original film?

The creator is @itsluneri. Use View post to open the X video this prompt belongs to.

More ui motion prompts