Creative Agency / Next.js
ASME template
A cinematic, liquid-glass marketing site with immersive video, editorial sections, and a refined service story.
- Editable React and TypeScript frontend source
- Standalone Next.js App Router project package
- Local demo interactions and responsive layouts
This is a static frontend template. Review the source, asset notices, and license terms before publishing.
Overview
What ASME is designed for
ASME is a cinematic agency presentation with a full-screen media hero, studio introduction, featured video, philosophy statement, service cards, and a detailed footer. The design mixes editorial typography with translucent surfaces.
Ideal users and use cases
- Production studios, design practices, and creative agencies
- Teams with strong video or photography assets
- Service businesses that need an editorial brand narrative
Page structure
Included sections
Media hero
Full-height hero, embedded navigation, background media, introductory copy, and newsletter-style control.
Editorial narrative
About, featured-video, and philosophy sections with alternating text and media treatments.
Services and footer
Service cards with media surfaces followed by contact and navigation groups.
Behavior
Interaction and responsive model
Interactions and motion
- Entrance and scroll-triggered transitions implemented with Motion
- Responsive navigation and interactive links
- Video playback and poster fallbacks supplied by local template assets
Responsive behavior
- Editorial grids collapse into stacked content on narrow screens
- Type, section spacing, and media proportions step down at mobile breakpoints
- The hero keeps a full-viewport composition across device sizes
Source
Implementation and customization
Implementation notes
- Client template wrapped in MotionConfig with user motion preference support
- React and TypeScript sections use utility classes and template-scoped style tokens
- Local media plus template-owned Inter and Instrument Serif font configuration
Customization points
- Replace hero and service media, then update their poster images
- Edit the studio narrative, service list, and footer destinations
- Adjust translucent surface and typography tokens in the template styles
Launch review
Limitations and accessibility notes
Frontend limitations
- Newsletter, inquiry, and social actions are not connected to services
- No CMS, media pipeline, contact backend, or analytics is included
- Publishing depends on replacing or clearing the bundled demo media
Accessibility and reduced motion
- MotionConfig follows the user's reduced-motion preference
- The hero checks reduced motion before starting its media treatment
- Final video captions, transcript needs, contrast, and link destinations depend on replacement content and require launch review
Provenance
Source, license, and media rights
- Source
- Adapted from Hirael template source and integrated into the Menace template architecture.
- Software license
- The standalone package preserves the Hirael MIT software license and attribution.
- Media and brand rights
- The software license does not establish separate rights for bundled images, video, fonts, trademarks, or likenesses. Review or replace demo assets before publication.
Keep exploring