Week 3 - Storybook, Playwright visual testing, advanced box shadow
March 16th, 2025
This week at 120.dev, we've focused on enhancing our development workflow and refining our app's visual aesthetics. From building custom tooling to implementing complex shadow rendering, we've made significant strides in both functionality and aesthetics.
Component visualization
A crucial part of our development workflow is having a robust component visualization system. Drawing inspiration from Storybook, we've created our own specialized tool for native apps that allows our team to preview components in various states, themes, and sizes all in one place.
Unlike web development where Storybook has become the industry standard, native app development often lacks equivalent tooling. By isolating components from the main application, we can develop, test, and iterate more efficiently, ensuring a cohesive and polished user interface across our entire products.
Visual testing
To complement our visualization system, we've developed an in-house visual testing solution inspired by Playwright. This custom tool allows us to capture screenshots of components, compare them against baseline images, and automatically flag visual regressions.
Native box shadow
At 120.dev, we believe the most compelling native applications have a tangible, physical quality to them. While many factors contribute to this realism, we believe shadows aren't merely decorative elements - they give UI elements a sense of depth and visual hierarchy, making the interface more realistic and intuitive.
The combination of these shadows with the rounded corners we developed earlier (Week 1) creates a sophisticated visual language that feels both modern and tactile. For more practical examples and inspiration, we would recommend a curated collection of CSS box-shadows available at GetCSSScan.
Inset box shadow
One of the hardest features we've implemented so far is inset box shadows. What seems like a simple visual effect actually requires significant mathematical calculation and deep understanding of 3D rendering when implemented in native environments, identifying performance pitfalls that could degrade rendering speed. If you aren't afraid of getting your hands dirty, Inigo Quilez has an amazing way of explaining the math behind the scene: The SDF of a Box.
We drew significant insights from Inigo's technique demonstrated in the YouTube video above, which inspired our approach to efficient shadow rendering. The process was so complex and interesting that we believe it deserves its own dedicated blog post in the future.
6-step scale box shadow
Inspired by Radix UI, we've implemented a 6-step scale box shadow system to create consistent elevation levels across our native apps. This progressive shadow intensity helps indicate interactive elements and creates a more dimensional experience without overwhelming the interface.
Layout for 120 AI Chat app
This week our team has also been working on the initial layout for the 120 AI Chat app. The design features a top title bar, a left sidebar for thread selection, and a central chat box. This central area enables users to interact seamlessly with various AI models: sending requests, switching between models, and viewing responses intuitively.
While designing the layout, we have considered adopting a purely native design for our application. However, to ensure cross-platform compatibility, we decided to prioritize maintaining a consistent user experience across all platforms. To achieve this goal, we decided to adopt a neutral design language to deliver a unified experience while still respecting certain platform-specific design principles.
As we continue our journey, we've made more progress in enhancing our development workflow and design capabilities. These advancements lay the foundation for the polished, intuitive experience we're committed to delivering. We're also reminded of what makes great digital products: attention to those subtle details that users might not consciously notice but that create an experience that feels tangible and real.
Stay tuned for more updates as we continue our journey of innovation and refinement!