table of contents
- The call came from someone who "really wanted to do it."
- A cycle of building and destroying.
- The birth of the "Explosion" concept
- Customizing Three.js: A Technical Challenge
- Two people, three months, taking on the challenge with Framer.
- Pushing the limits of no-code development
- "Perversion" achieved with Blender x Framer
- Japan's first Framer expert certification, and the 10th anniversary.
- Final thoughts
The call came from someone who "really wanted to do it."
The first project introduced was the creation of a corporate website from scratch for the venture capital firm "ANRI".
The project was driven by the challenge of commoditization in the venture capital industry. Furthermore, Anri Samata said that as the company grew in size and its social responsibilities increased, he felt a subtle disconnect between the generally accepted "ideal state" and the "desired state" that he was passionate about.
Ota says of the project, "The goal of this CI refresh project was to clearly express the 'ANRI-ness' that we discovered with ANRI and New Peace, and to create a brand that makes promising entrepreneurs intuitively feel that something amazing will come of working with ANRI."
This project was a large-scale undertaking involving multiple production companies, with Shinpei Takagi of NEWPEACE overseeing the overall project, Takaya Ota of Cologne handling logo and CI development, and FunTech handling web and 3D motion.
The project began when Takagi and Takaya Ota reached out to them. It was a straightforward offer: "We really want to do something crazy, so we reached out to FunTech." Ota recalls, "They approached us because they thought if we were going to do something crazy, it had to be FunTech, and the initial idea for this project was to go all out and do something crazy."
The FunTech team consisted of four members: Ota-san, who was in charge of web art direction and planning, project management, and wireframe creation; Kariya-san, a top designer, for web design; Terence-san, a Dutch 3D creator, for 3D model and texture creation; and Hashimoto-san for engineering. The project took approximately eight months to complete.
A cycle of building and destroying.
A key feature of this project was its adoption of "agile development" rather than the usual meticulous approach.
According to Ota, for typical projects, he creates around 70 pages of proposals, strategically presenting concepts and visuals. However, this time, instead of such a meticulous approach, he says, "It was simply a cycle of creating, tearing down, and testing."
The first thing we tackled was testing how to use the logo created by Takaya Ota in 3D. We received a provisional logo model data, Terence imported it into Cinema 4D, and started constantly changing the textures. We shared the results of this testing with the client team and discussed which one best represented ANRI and which one best embodied ANRI's concept, while also considering the feasibility of each option.
Once a general direction was decided, they moved on to testing the web design. According to Ota, "We probably created around 70 key visuals alone." Furthermore, since logo creation was also progressing simultaneously, "we were working on the logo for a long time without it being finalized."
The birth of the "Explosion" concept
Through this process of trial and error, a new concept, "Explosion," was born. This was a suggestion from Takaya Ota, and the creative concept involves a visual of fragments exploding and flying around the logo.
Once this direction was decided, we created a demo in Cinema 4D and shared the interaction ideas with everyone. Ota recalls, "It was only when this demo was released that the entire ANRI team and production team all agreed that the visual expression, including the corporate identity, was 'really great,' and that's when we really started moving forward."
During the production process, Takaya Ota visited FunTech's office, and everyone worked together to decide on the textures using a custom GUI tool that allowed for free editing of textures, demonstrating collaborative efforts that transcended company boundaries.
Customizing Three.js: A Technical Challenge
Once the design was finalized, the project was handed over to engineer Hashimoto.
Hashimoto's mission was to get Terence's high-quality demo to run smoothly in a web browser. Hashimoto says, "Rather than coming up with an idea from scratch, I focused on how to get this working, and I paid attention to two things."
The first requirement was "a design that can withstand rapid state changes." The specification involved four textures (the surface texture of the 3D model) changing rapidly, so it was necessary to ensure that it would run smoothly no matter how fast or unreasonable the transitions were.
Hashimoto-san:"We completely rebuilt the standard material settings for Three.js (*1) and created a material specifically for ANRI."
Furthermore, it was necessary to create the effect of each floating cube in the background moving differently and each having a different texture. This was also implemented through trial and error, adjusting the number of vertices in the 3D model that affected the movement.
The second point is "scene design that can withstand unreasonable screen transitions." This site had unusual transitions, such as moving from the top to a lower level, returning from a lower level to the top, and going to a story page.
Hashimoto-san:"This kind of thing is really prone to bugs, so it's generally considered not a good idea. But to try and fix this, we created a core class that manages all the states involved, and implemented an internal mechanism where all state transitions are seamless and linear."
The ANRI corporate website, completed after these technical challenges, has received high praise not only from the VC industry but also from creators.
Two people, three months, taking on the challenge with Framer.
Next, they presented a case study of corporate branding from the startup "Neu".
Neu is a five-year-old startup that has sped through its founding period and is now at a point where it will focus on recruitment and major business transformation. Ota says, "We had the necessary skills, but we didn't even have a corporate website to begin with, so our theme was to properly create a unique identity for this growth phase and to express the passion we put into advertising."
What made this project unique was that it was a three-month project with only two team members. Ota was in charge of direction, while designer Horino handled everything from design to implementation.
The reason we didn't need to hire engineers is because we're using Framer (★2).
During the planning stage, Ota recognized Nue's "unconventional approach to advertising."
Mr. Ota:"I found their approach to advertising, which is truly meticulous and scientific, fascinating. It's something that Neu's clients appreciate, and I thought it was truly unique, so the idea to properly showcase this aspect was the starting point for this project."
From there, they created the tagline "Putting passion and dedication into advertising" and translated it into visual concepts. Ota's intention was to display as much text as possible. Neu's greatest strength was its "carefully selected word choices," so he wanted to express that visually. He then asked Horino to "bring out a sense of madness."
Pushing the limits of no-code development
From here, the baton was passed to Mr. Horino, who spoke about the design and implementation.
This was Horino's first time implementing with Framer, and she's a designer who doesn't usually do any coding. Therefore, she says she set three goals for herself to work towards.
The first reason was "I wanted to surprise everyone." At the time, Framer's projects were starting to be seen on gallery sites, so they wanted to create something completely unprecedented.
The second goal was to pursue "adjustments that only a designer can make." I was hoping for the possibility of creating something immediately when an idea came to mind and being able to test it exactly as I wanted.
The third goal was to "verify the limits of what can be done without coding." Although I had heard that it was possible with Framer, I wanted to see for myself just how far it was actually possible. Therefore, I challenged myself to do so using only Framer's standard features, without using any custom code.
Horino-san:"We decided to push the limits of what could be implemented using no-code, so I think we ended up working on a fairly wide range of implementations."
In the actual production process, they had already reached a point close to the current visual style in the initial stages. They said they explored various possibilities, such as making things three-dimensional, adding shading, erasing elements, inverting colors, and playing around with two-dimensionality.
"Perversion" achieved with Blender x Framer
The final, polished visuals were filled with Horino's unique attention to detail.
This technique creates the effect of text flowing even on the back of the 3D model. Horino explains, "This 'text flowing even in places you can't see' is a personal obsession of mine, and in order to bring out this eccentricity, I ultimately created the 3D animation using Blender (★3)."
So how was it implemented?
Horino-san:"We exported the video with a background as usual, created an SVG vector file with the same silhouette, and then used that SVG to apply a mask in Framer. This made it appear as if the 3D model was placed with a transparent background."
In addition, buttons with fluid shapes were also implemented without using custom code. Initially, there was a component that they relied on, but it turned out that it couldn't be used in Safari. Horino recalls, "This was a pretty important point, so we somehow managed to implement it using only Framer's functions."
Furthermore, the fluid shape that runs through the header is also one of Horino's favorite features.
Horino-san:"Structurally, it's incredibly simple; it's just a matter of shifting the positions of these blue boxes, which are placed in the background using the variant (★4), and connecting them. However, by using Framer's layout component (a function that allows fixed elements such as headers and footers to be placed in common), transitions can be made without reloading each page, while maintaining the active state of the animation."
Horino says that by successfully completing this no-code challenge, they were able to create something creative that surprised everyone, including those within the company.
Japan's first Framer expert certification, and the 10th anniversary.
Reflecting on the completion of the Neu project, Ota says, "There really hadn't been a case of something like this being completed to this extent in Japan, so the fact that we were able to achieve our 2025 goal of 'creating overwhelming creativity using our own unique methods' around July was a huge accomplishment."
This project led to FunTech becoming the first company in Japan to receive Framer Expert certification.
At the end of the session, Ota gave a sneak peek at the rebranding plans for the company's 10th anniversary next May. The company is currently in the process of redefining its corporate identity, logo, and slogans, and a prototype was unveiled to the audience with the condition that "photography is strictly prohibited."
Final thoughts
One project involved eight months of full-scratch engineering (ANRI), while the other was a no-code development project completed by two people in three months (Neu). Although the methods differed significantly, the underlying principle was a consistent one: "maximizing the client's enthusiasm."
FunTech consistently responds to requests like "We want to do something crazy!" with technology and ideas. The diversity of technology choices they demonstrated taught us the importance of choosing the best method for the client, regardless of the means.
★1 Three.js: A JavaScript library that enables 3D rendering on the web.
★2 Framer: A no-code tool that allows you to handle everything from design to implementation.
★3 Blender: Open-source 3DCG creation software
★4 Variant: A feature that allows you to switch the state of elements in Framer.
