2025
AISTON
Brief
- Built a scroll-linked homepage animation that combines video with an SVG vector mask.
- Extended the brand’s tone into detailed interface patterns, from the footer menu to per-artist layouts.
- Designed for long-term operation with microCMS updates, static delivery, and a managed contact flow.
ANIMATION
AISTON is a talent management agency representing actor Junichi Okada alongside Shohei Ueki and Suika Yamazaki — artists active across film, television, and stage. I handled technical direction and full-stack development for their corporate website.
The opening sequence on the homepage features the “A” logo expanding to fill the screen before dissolving into a background video, with the footage clipped through SVG vector paths. Achieving smooth, consistent masking across browsers while managing render cost made this one of the more demanding implementations on the project. The motion system was built on top of semantic HTML, so the site could keep a crawlable structure while still carrying the visual direction.
FOOTER
The footer is designed not as a secondary list of links, but as a navigation layer that gives the page a deliberate ending. Inspired by a screen or stage curtain, panels move in from the top and bottom; once they meet, the menu links appear. It keeps the navigation functional while giving the final interaction the same restraint and tension as the rest of the site.
ARTIST PAGE
Each artist has a distinct presence on the site. Built on a shared module system, artist pages are individually configurable in layout, allowing different visual treatments without duplicating templates. The works and appearances sections were structured as a browsable credit database, with the CMS model set up to support detailed data entry over time.
PERFORMANCE
With video at the center of the experience, Mux was chosen for adaptive streaming — ensuring stable, high-quality playback regardless of network conditions. Lazy loading and asset optimization keep the site fast even as the content library grows.
OPERATIONS
The site runs on a headless architecture. Content is managed in microCMS, fetched at build time, and served as a fully static site over a CDN. Whenever content changes, a webhook triggers CI to rebuild and redeploy the site, so editors can manage routine updates from the CMS without touching the codebase.
The design considered not just visuals and motion, but how the site would be operated after handover. Static delivery keeps the runtime simple and reduces the attack surface, while non-technical staff can handle routine updates through the CMS. For contact handling, I chose a Japanese form service that fit the client’s workflow and kept form maintenance and spam protection with a dedicated provider.
When a visitor submits an audition or contact form, an auto-reply confirms receipt while a notification is sent to the staff in charge. Routing submissions through a form service with spam filtering and a management dashboard helps the team notice incoming inquiries and respond reliably.
Credits
- Producer — Taisei Dofuku
- Technical Director / Developer — Taisei Dofuku
- Art Director / Designer — Jin Okuma