Project Name : SKETCHED.Space Web
Task Scope : Web Design Development
Category : Commercial
Completion : Mar. 2026
The development of the sketched.space website was carried out by rendering the concept of 'Point of View (POV)' as a visualized mind-map structure. The overall architecture adopted a full-screen layout based on Canvas. A Circle Packing algorithm was applied to arrange multiple nodes, implementing the narrative structure of the website that transitions from the point of raising a problem to the point of deriving a solution. During this process, coordinate operations for multiple objects to render the canvas in invisible areas and state management functions for keyword nodes within the Viewport were integrated. In terms of design and functionality, the focus was on implementing interaction through scroll control. To achieve this, a method of blocking the user's Wheel Event and executing Programmatic Scroll was introduced. For the Landing page, a Gravity Scroll Inducement mechanism was applied, triggering an event where the keyword cluster in the center of the screen moves downwards to force viewport movement. In particular, since the particle animation on the landing page operates based on scrolling, rendering optimization was prioritized to minimize experience variance based on user environments and maintain a consistent, smooth frame rate. Sequence Line Animation was applied to the Service and Works pages to control page transitions and information exposure. The progression rate of the animation extending the baseline downwards was synchronized with the scroll value, and it was designed so that the exposure of subsequent sections is determined by the line's extension state. The Service page applied a visual effect where content seems to rise upwards upon scrolling, preventing monotony during the scrolling process. The Works page was implemented so that content automatically moves downwards without user scroll input, and upon a mouse Hover event, screen movement stops and detailed descriptions are exposed. Technically, this function works by detecting viewport entry and controlling the screen by coordinate units set in the script through animation library calculations. In terms of data management, content update architecture was established by integrating Sanity CMS. During this process, considering that the client is also a user operating the administrator page, the Schema was structured to allow intuitive data input and modification, heavily prioritizing administrator UX.