Frontend Engineering — Vol. 13

Overview

This pack collects 9 practical, copy-and-paste prompts made for programming & dev. You'll get prompts such as “Gravity Flux Flappy Engine”, “Quantum Topology Matcher (” and “Gyroscopic Maze Run”. The structure is already done, so instead of engineering a prompt you just fill in what makes your situation unique. They run in ChatGPT, Claude and Gemini and most other assistants — no special setup or account required.

• 1.3D Physics Sandbox Architect

  Copy

  I want you to act as a Senior WebGL Game Architect specializing in Three.js and Cannon.js. Your goal is to design a high-performance 3D physics sandbox logic.
  
  Core Mechanics:
  Implement a momentum-based collision system within a bounded 3D container.
  
  Requirements:
  
  Initialize a Three.js scene with a physics world using Cannon.js.
  
  Enable a "Force Interaction" system where clicking or touching the screen applies an instantaneous impulse to 3D objects based on the vector between the camera and the click point.
  
  Implement friction, restitution (bounciness), and linear/angular damping to simulate realistic energy loss.
  
  Use an efficient animation loop to synchronize the physics body positions with Three.js meshes.
  
  Ensure the code is modular so different geometries (Spheres, Boxes, Convex Hulls) can be added easily.
  
  Please output the core JavaScript logic and explain the mathematical implementation of the impulse vector calculation.

• 2.Create a logic where a 3D geometric mesh

  Copy

  I want you to act as a 3D Particle Effects Engineer specializing in kinetic typography and mesh-to-particle morphing. Your goal is to design a sophisticated WebGL-based transition system.
  
  Core Task: Create a logic where a 3D geometric mesh (e.g., a torus or a custom GLTF model) dissolves into a cloud of thousands of interactive particles and reassembles into a different shape.
  
  Technical Requirements:
  
  Implement an FBO (Frame Buffer Object) to store and update particle positions on the GPU for high performance.
  
  Use GPGPU techniques to calculate attraction and repulsion forces between particles and their target "anchor points" in the destination mesh.
  
  Add a "Noise Turbulence" field using 3D Perlin or Simplex noise to create organic movement during the transition phase.
  
  Ensure particles have dynamic color gradients based on their velocity or distance from the center.
  
  Provide a clear explanation of how to map vertex data from a 3D model into a particle attribute buffer.
  
  Please output the conceptual Shader logic and the core JavaScript implementation using Three.js.

• 3.Modern Web Development Assistant

  Copy

  Act as an expert full-stack web developer and UI/UX designer. Help me build modern, responsive, and professional websites using HTML, CSS, JavaScript, React, Node.js, and databases when needed. Generate clean, optimized, and well-structured code with proper comments and best practices.

• 4.Gravity Flux Flappy Engine

  Copy

  I want you to act as a top-tier physics-based gameplay programmer. Produce a SINGLE FILE (index.html) build of an architectural flight evasion game.
  
  GAME SPEC:
  
  Title: Gravity Flux
  
  Core mechanic: Navigate a self-inflating soft-body sphere through an environment of closing and expanding organic geometric gaps.
  
  Goal: Maintain elevation and pass through dynamic structural gates without making contact.
  
  TECH REQUIREMENTS:
  
  Single file: Combined HTML, CSS, and vanilla JavaScript with no dependencies.
  
  Rendering: 2D Canvas API. All obstacle shapes must be procedurally generated mathematical curves (Bezier paths) that morph continuously over time using sine waves.
  
  Audio: Utilize the Web Audio API to synthesize ambient pulse sounds and reactive acoustic sweeps upon passing gates.
  
  Design style: Zen-like abstract art style. Uses a monochromatic pastel palette with deep soft shadows (shadowBlur on canvas) to emphasize spatial depth and fluid motion.

• 5.Quantum Topology Matcher (

  Copy

  I want you to act as a creative technologist and interaction architect. Construct a single-file (index.html) web game based on spatial alignment mechanics.
  
  GAME SPEC:
  
  Title: Quantum Entanglement
  
  Core mechanic: A 3D array of collapsed particle clusters floats in space. Clicking a cluster unfolds its unique 3D geometric matrix.
  
  Goal: Find and unfold two clusters with identical spatial orientations and topologies to fuse them via gravity implosion vectors.
  
  TECH REQUIREMENTS:
  
  Single file: HTML5 with inline styles and vanilla JavaScript leveraging Three.js via CDN.
  
  Rendering: Three.js WebGLRenderer with high-performance buffer geometries.
  
  Physics: Implement smooth quaternion math for rotating clusters via mouse drag. When a match occurs, compute mutual attraction vectors causing an implosion particle effect before mesh destruction.
  
  Design style: Minimalist surrealism. Pure white void background, frosted glass (transmission) cluster materials, and interactive volumetric light trails.

• 6.Gyroscopic Maze Run

  Copy

  I want you to act as a master game designer specializing in mobile-responsive physics simulation. Create a SINGLE FILE (index.html) interactive maze game.
  
  GAME SPEC:
  
  Title: Axial Drift
  
  Core mechanic: A marble rolls inside a complex geometric maze. The player shifts the global gravity vector (X and Y axes) to guide the marble.
  
  Goal: Maneuver the marble to the center vector vortex while dodging dynamic kinetic trapdoors.
  
  TECH REQUIREMENTS:
  
  Single file: Pure web technology stack (<!doctype html>, CSS, JS) without heavy engine frameworks.
  
  Rendering: 2D Canvas optimized for mobile and desktop viewports, scaling pixel-perfectly.
  
  Mechanics: Accept desktop mouse click-drags or mobile device orientation API (DeviceOrientationEvent) to tilt the maze physics grid. Implement rigid-body friction, angular velocity, and momentum damping for the marble.
  
  Design style: Bauhaus architectural aesthetics. High contrast bold solid primary color blocks, heavy black stroke lines, and real-time drop shadows.

• 7.AI-Powered Dynamic Ad Integration System for Live IPL Broadcasts

  Copy

  Generate a Prompt and Act as an expert full-stack web developer and UI/UX designer. Help me build modern, responsive, and professional websites using HTML, CSS, JavaScript, React, Node.js, and databases when needed. Generate clean, optimized, and well-structured code with proper comments and best practices and generate it for a Full Hackathon basis so that It will build best web developed app or the topic "To Develop an AI-powered dynamic content integration system for live IPL broadcasts that identifies traditional ad breaks and seamlessly overlays contextually relevant products related to the foods items , or the sports essentials ,etc for placements directly into scene backgrounds or objects, creating a continuous and non-disruptive viewing experience for the audience . or you can create on the basis of "Design a real-time contextual ad insertion engine that leverages computer vision to analyze live IPL broadcasts, identifying optimal surface areas for virtual signage and dynamically rendering brand-aligned graphics that blend seamlessly with the action."

• 8.Design Brief

  Copy

  This is a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}.
  
  Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults.
  
  Output characteristics as structured JSONC.
  
  For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).
  
  End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.
  
  The output should be two code blocks: one for the design brief and one for the JSONC design specification.

• 9.21st.dev component prompt

  Copy

  You are given a task to integrate an existing React component in the codebase.
  
  The codebase should support:
  - shadcn project structure
  - Tailwind CSS
  - Typescript
  
  If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.
  
  Determine the default path for components and styles.
  If default path for components is not /components/ui, provide instructions on why it's important to create this folder
  Copy-paste this component to /components/ui folder:
  
  ${21st.dev_component}
  
  Implementation Guidelines
   1. Analyze the component structure and identify all required dependencies
   2. Review the component's argumens and state
   3. Identify any required context providers or hooks and install them
   4. Questions to Ask
   - What data/props will be passed to this component?
   - Are there any specific state management requirements?
   - Are there any required assets (images, icons, etc.)?
   - What is the expected responsive behavior?
   - What is the best place to use this component in the app?
  
  Steps to integrate
   0. Copy paste all the code above in the correct directories
   1. Install external dependencies
   2. Fill image assets with Unsplash stock images you know exist
   3. Use lucide-react icons for svgs or logos if component requires them

1. Step 1

   Pick a prompt

   Browse the 9 prompts and pick the closest match — “3D Physics Sandbox Architect” is a good place to start.

2. Step 2

   Copy it

   Hit Copy on the prompt you want, or grab the whole set with “Copy all 9 prompts”.

3. Step 3

   Fill in the blanks

   Fill in the [bracketed] placeholders with your specifics — that's what makes the output yours.

4. Step 4

   Run and refine

   Drop it into ChatGPT and refine in a reply or two until it fits programming & dev.

Related packs

• 

  Programming & DevFree

  Frontend Engineering — Vol. 12

  A focused toolkit for faster, better output

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 11

  Hand-picked prompts you can copy and run today

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 10

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Regex Helpers

  Everything you need in one collection

  5 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 4

  Copy, tweak, and ship in minutes

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 5

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini