Image Prompts
Magic
Library
Floating Tomes
An ancient, moss-covered library with books floating in mid-air.
9 resources
Library Prompts and Templates
Explore Library AI prompts, video prompts, and landing page templates from Prompt Studio.
Browse this tag by category
Image Prompts
Magic
Library
Floating Tomes
An ancient, moss-covered library with books floating in mid-air.
Video Prompts
Magic
Library
Floating Tomes
An ancient, moss-covered library with books floating in mid-air.
Landing Pages
education
library
3D Interactive Library Educational Clips
{ "name": "3D Interactive Library Educational Clips", "objective": "Develop a modern, educational, immersive and interactive landing page to present a 3D digital library of educational clips, micro-lessons, short videos, learning resources, training capsules, visual explanations, quick guides and academic content.", "main_concept": "The website should feel like entering a futuristic educational library where each shelf contains clips, lessons and interactive resources. As the user scrolls, they should visually move through a 3D library with aisles, shelves, holographic screens, digital books, tablets, floating video clips, subject categories, whiteboards, study stations and progress panels.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, shelves, books, clips, cards, tablets, screens, icons, whiteboards, lights and backgrounds.", "Create an experience focused on education, microlearning, a digital library, educational clips, content search, playlists, visual learning and student progress.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, clear, educational and performant animations.", "Keep the scene readable, organized, accessible and premium.", "Work freely to improve the 3D scene, educational narrative, interactions, visual design, parallax and conversion flow." ], "structure": { "header": { "logo": "EDU CLIPS LIBRARY 3D", "menu": [ "Home", "Library", "Clips", "Categories", "Playlists", "Teachers", "Pricing", "Contact" ], "featured_button": "Start Learning", "description": "Fixed header with a translucent glassmorphism-style background, functional hamburger mobile menu and smooth scrolling to each section." }, "hero": { "main_title": "Explore Educational Clips Inside an Interactive 3D Library", "subtitle": "Discover short lessons, visual explanations, study playlists and learning resources through an immersive digital library experience.", "buttons": [ "Enter Library", "Browse Clips", "Start Learning" ], "background": "A 3D educational library with modern shelves, digital books, screens with clips, floating tablets, lesson cards, glowing whiteboards, study paths, academic icons and visual depth.", "parallax": "Add parallax between the title, clips, books, shelves, screens, cards, lights and background." }, "canvas_3d": { "name": "Interactive Educational Library", "description": "Create a 3D scene inside a canvas that represents a premium, futuristic and friendly educational library.", "elements": [ "Main library entrance", "Aisles with digital shelves", "Floating books", "Holographic screens with educational clips", "Tablets with micro-lessons", "Course cards", "Interactive whiteboards", "Study stations", "Subject categories", "Search panel", "Playlist wall", "Progress dashboard", "Abstract teacher or tutor avatars", "Downloadable resources", "Bookmarks, notes, headphones and digital pencils", "Soft lights, clean shadows and visual depth" ], "hotspots": [ "Search Library", "Featured Clips", "Science Shelf", "Math Shelf", "Language Shelf", "History Shelf", "Study Playlists", "Progress Dashboard", "Start Learning" ], "main_animation": "The “Enter Library” button must trigger a visible camera animation entering from the main door toward the shelf aisles and the educational clips wall." }, "3d_scroll_storytelling": { "zones": [ "Main entrance", "Educational search", "Shelves by category", "Featured clips", "Learning playlists", "Micro-lesson station", "Progress dashboard", "Teachers and tutors", "Access plans", "Final contact" ], "transformations": [ "translateZ for depth", "scale to highlight clips, cards and CTAs", "soft rotate for books, tablets, cards, bookmarks and icons", "fade for clean transitions", "subtle blur for distant aisles", "walkthrough-style camera movement through a digital library" ], "parallax_layers": { "front": [ "titles", "buttons", "CTAs", "search bar", "filters", "clip cards" ], "middle": [ "shelves", "books", "tablets", "screens", "whiteboards", "playlists", "hotspots" ], "background": [ "library architecture", "lights", "aisles", "windows", "shadows", "particles" ] } }, "sections": [ { "name": "Library Overview", "title": "A Smart Library Built for Fast Visual Learning", "description": "Explain how the library helps users find educational clips, organize resources, learn by category, save favorites and build study paths.", "cards": [ "Short Educational Clips", "Searchable Learning Library", "Curated Study Playlists", "Progress Tracking" ] }, { "name": "Search & Filters", "description": "Create a functional visual search experience.", "search_options": [ "Search by topic", "Search by subject", "Search by grade level", "Search by duration", "Search by teacher" ], "filters": [ "All", "Math", "Science", "History", "Language", "Technology", "Art", "Study Skills", "Popular", "New" ], "button": "Clear Filters", "behavior": "Typing or selecting a filter should change the visible content or show simulated results. Clear Filters must restore the view." }, { "name": "Featured Educational Clips", "clips": [ "How Photosynthesis Works", "Fractions in 5 Minutes", "The Water Cycle Explained", "Basic JavaScript Loops", "World War II Timeline", "Spanish Vocabulary: Daily Routines", "Intro to Geometry", "How to Take Better Notes" ], "fields": [ "Title", "Subject", "Duration", "Level", "Teacher", "Short description" ], "buttons": [ "Play Clip", "Save Clip" ], "behavior": "Play Clip must open a simulated player or video modal. Save Clip must change the state to saved." }, { "name": "Clip Player", "description": "Create a simulated educational player.", "elements": [ "Video placeholder", "Progress bar", "Play/pause button", "Captions", "Quick notes", "Related resources", "Review question" ], "buttons": [ "Play Lesson", "Take Notes", "Mark Complete", "Download Resource" ] }, { "name": "Categories / Shelves", "shelves": [ "Math Shelf", "Science Shelf", "History Shelf", "Language Shelf", "Technology Shelf", "Art Shelf", "Business Shelf", "Study Skills Shelf" ], "fields": [ "Fictional number of clips", "Level", "Description" ], "button": "Open Shelf", "behavior": "Open Shelf must filter clips or focus the shelf in the canvas." }, { "name": "Study Playlists", "playlists": [ "Math Foundations", "Science Essentials", "Coding Basics", "History Crash Course", "English Practice Clips", "Exam Prep Toolkit" ], "fields": [ "Number of clips", "Total duration", "Level", "Goal", "Fictional progress" ], "button": "Start Playlist" }, { "name": "Learning Paths", "paths": [ "Beginner Path", "Exam Review Path", "Teacher Recommended Path", "Fast Revision Path", "Visual Learning Path", "Project-Based Learning Path" ], "fields": [ "Steps", "Duration", "Goals" ], "button": "Choose Path" }, { "name": "Teachers / Tutors", "teachers": [ "Dr. Elena Brooks — Science", "Marco Ruiz — Math", "Aisha Khan — History", "Sofia Martin — Language", "Kenji Mori — Technology" ], "fields": [ "Subject", "Short bio", "Published clips" ], "button": "View Teacher" }, { "name": "Progress Dashboard", "metrics": [ "Clips watched", "Playlists completed", "Study streak", "Notes saved", "Quiz score", "Favorite subjects" ], "button": "View Progress" }, { "name": "Resources", "resources": [ "Study guide", "Worksheet", "Summary sheet", "Quiz PDF", "Flashcards", "Teacher notes" ], "fields": [ "Format", "Subject" ], "button": "Download Resource" }, { "name": "Pricing / Access", "plans": [ "Free Library", "Student Plus", "Family Learning", "Teacher Toolkit", "School License" ], "fields": [ "Fictional price", "Available clips", "Playlists", "Downloads", "Progress", "Support" ], "button": "Choose Plan" }, { "name": "Testimonials", "testimonials": [ "The 3D library made it easy for students to discover short lessons.", "Clips, notes and playlists helped my class review faster.", "The visual shelves made learning feel organized and engaging." ] }, { "name": "Contact", "fields": [ "Name", "Email", "Role", "Learning Need", "Message" ], "button": "Contact Learning Team", "fictional_data": [ "Email", "School partnership note", "Support availability", "Social links" ] } ], "footer": { "description": "Keep the design clean, spacious, educational and professional." } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Library must activate a guided animation in the 3D canvas.", "Browse Clips must go to Clips.", "Start Learning must go to Playlists or Pricing.", "Canvas hotspots must show information.", "The search bar must filter or show simulated results.", "Filters must change the visible content.", "Clear Filters must restore the view.", "Play Clip must open a simulated player.", "Save Clip must change the state to saved.", "Play Lesson must change the state to playing.", "Take Notes must open a notes panel.", "Mark Complete must update visual progress.", "Download Resource must show confirmation.", "Open Shelf must filter clips or focus a shelf.", "Start Playlist must select a playlist and update progress.", "Choose Path must select a path and show a summary.", "View Teacher must open a profile or filter clips.", "View Progress must open the dashboard.", "Choose Plan must select a plan or go to Contact.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax." ], "animations": [ "When scrolling, the camera should move from the library entrance toward shelves, clips and the progress dashboard.", "Shelves should appear from depth using translateZ, scale and fade.", "Books should float with smooth rotation.", "Clip screens should light up progressively.", "Clip cards should slide out from the shelves as 3D panels.", "Filters should reorganize clips with a smooth transition.", "The player should open with a clean zoom effect.", "Progress bars should fill when entering the screen.", "Learning path nodes should light up step by step.", "Downloadable resources should slide like 3D documents.", "Dashboard metrics should animate with progressive counters.", "Backgrounds, aisles, windows, shelves and lights should move more slowly to create depth.", "Add soft library-dust particles, blue/cyan glow, glass reflections, digital paper textures, clean shadows and warm study light.", "Avoid abrupt, fast or chaotic movements." ], "visual_style": { "description": "Educational, technological, clear, premium, friendly and inspiring.", "inspiration": [ "modern libraries", "EdTech platforms", "microlearning", "online academies", "digital study rooms", "educational dashboards", "interactive libraries", "visual learning experiences" ], "palette": [ "Night blue", "Educational cyan", "Ivory white", "Learning green", "Soft yellow for highlights", "Graphite gray", "Paper beige", "Technological purple as an accent" ], "components": [ "light and dark glassmorphism", "clean cards", "soft lights", "digital shelves", "paper textures", "elegant shadows", "academic icons", "organized composition" ], "feeling": "Clarity, discovery, learning, organization, motivation and progress." }, "expected_result": "A complete, immersive and functional landing page for “3D Interactive Library Educational Clips”, with a 3D canvas, interactive educational library, search bar, filters, clips, player, subject shelves, playlists, learning paths, teachers, progress dashboard, resources, pricing, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design and a premium EdTech platform aesthetic." }
Landing Pages
landing page
anime
MangaShelf — Digital manga reading library
A reading-first manga library focused on chapters, collections, and discovery. A reading-first manga library landing built around discovery, chapters, and collections. Create a single-page light mode landing for "MangaShelf", a Manga Platform site inspired by modern anime / otaku product design. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #fffbf5, text #1c1917, muted #78716c, accent #f97316. **Typography:** Google Fonts — "Inter" (bold headlines, optional subtle gradient text on hero keyword). **Sections (in order):** 1. Sticky nav: logo "MangaShelf", links (Genres, Library, App), accent CTA ("Watch free" / "Get tickets" / "Join"). 2. Hero: pill "10,000+ series · Same-day Japan", large headline with one italic accent-colored keyword, subcopy, dual CTAs (primary gradient button + ghost outline). 3. Genre chips: Shonen, Josei, Horror, Sports. 4. Featured grid (3 cards): - **Blade of Ether** (TOP 10): Action · Monthly — Vol. 42 out now - **Café at Dusk** (ROMANCE): Drama · Completed — 12 volumes - **Hollow District** (HORROR): Mystery · Ongoing — Ch. 156 weekly Each card: label badge, title, genre/detail line, meta line (rating/episodes), "Watch" or "View" link. 5. Stats band: 3 metrics (e.g. "10k+ titles", "Simulcast", "HD streaming"). 6. Footer: email signup, social links, copyright. Anime aesthetic: vibrant accent gradients, poster-card grids with rounded corners, energetic but clean UI. Optional CSS gradient hero glow. Responsive (768px). Returns index.html only.
Landing Pages
3D
library
Elegant 3D Library with Educational Video Clips and Semantic Search
Build an elegant 3D library where shelves hold volumes that open to play educational video clips, combined with semantic search to find content by topic, duration, or level. **Deliverables:** index.html, styles.css, library.js, assets/ folder with clips, metadata, thumbnails. **Stack:** Three.js, HTML5 video, Algolia or local semantic search, GSAP. **Description:** 3D library where each shelf contains volumes that, when opened, play educational video clips. The experience combines elegant spatial navigation with semantic search that lets users find clips by topic, duration, or level. **Semantic search:** User types a query; the engine returns results ranked by semantic similarity (embedding) and relevant shelves illuminate in the scene. Results show thumbnails and a snippet; selecting one triggers a fly-to toward the volume and the clip plays. **Clips & metadata:** Each clip has JSON metadata: title, duration, language, transcript, tags. Side panel shows transcript with synchronized highlights (scroll-to-time). SRT subtitles and downloadable transcript option. **Spatial interactions:** Free walk through aisles with orbit/first-person toggle. Quick keyboard focus (keys 1–9) for popular sections. Favorites: drag clip to 3D "cart" to create a playlist. **Playback & quality:** Adaptive streaming when available; preload thumbnails and metadata. Pause playback when user moves away; option to play in background in HTML panel. **Accessibility & fallback:** ARIA on controls, subtitles, transcripts, and 2D version with list and player. prefers-reduced-motion reduces transitions and disables fly-to. **Performance:** Progressive shelf loading; LOD for models; 512–1024px textures. Pause render when canvas off-viewport; requestIdleCallback for non-critical tasks. **Analytics:** Search terms, clips played, average time per clip, most common navigation paths. Camera heatmaps to identify areas of interest.
Landing Pages
3D
library
3D Light Mode Educational Library with Clips and Semantic Search
A 3D library in light mode with light-wood shelves containing educational clip volumes. Semantic search allows natural language queries; results illuminate relevant shelves and the camera flies to the clip. Each clip has rich metadata: title, duration, language, transcript, tags, difficulty. Selecting a clip plays it on a 3D panel and the transcript syncs with highlights that jump to timestamps. Playlists by dragging clips to a 3D cart. 'Mark for review' adds personal notes with timestamps. Adaptive streaming, thumbnails and proxies for fast scrubbing. High-contrast mode and adjustable text size. Scene optimized with LOD for shelves and lazy-load by section. Analytics tracks frequent searches, top clips, and navigation paths. **Deliverables:** index.html, styles.css, library3d.js, assets/ (clips, metadata JSON, thumbnails, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, local embedding search. **Interactions:** Semantic search illuminates shelves, fly-to clip, 3D playlists, scrubbing with proxies.
Landing Pages
3D
writer
3D Writer Library — Readings and references
A writer-centric library for references, readings, and structured reading paths. A 3D library where each book projects a reading clip (video or audio). Selecting a book zooms the camera in and plays the reading with subtitles and synchronized highlighted text. A 'Live Reading' mode connects to a WebRTC stream (optional) or plays a recording. A panel shows excerpts and buy/download links. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, descriptions. Analytics: readings played, excerpts downloaded. **Deliverables:** index.html, styles.css, writer3d.js, assets/ (reading clips, text snippets, models). **Stack:** Three.js, video HTML5, Howler.js, GSAP. **Interactions:** Click book opens reading with synced text highlight, live reading mode, download excerpts.
Landing Pages
3D
translator
3D Translator Library — Voice and language
A language-first library for voice notes, translations, and multilingual content. A 3D library where each shelf contains translation examples and voice clips in different languages. Selecting an example plays the original clip and translation in audio, with synchronized subtitles and parallel text. A side-by-side comparator shows original and translation with synced scrubbing. A form allows requesting custom samples. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, aria. Analytics: most requested languages, clips played. **Deliverables:** index.html, styles.css, translator3d.js, assets/ (voice clips, transcripts, models). **Stack:** Three.js, Howler.js, video HTML5, GSAP. **Interactions:** Click shelf opens original + translated audio with parallel text, compare mode with synced audio players, request custom sample form.