LINE BY LINE

LINE BY LINE reimagines interior design by animating furniture as hand-drawn sketches. It makes room planning more engaging, intuitive, and accessible while laying the foundation for AI-assisted.

Comment

Inspiration

Most room planning and interior design tools are either too technical or too static. I wanted to create an experience that feels creative, interactive, and fun. My inspiration was the idea of watching furniture come to life as if it were being sketched by hand, making room design feel less like using software and more like creating art. LINE BY LINE combines animation with room planning to make designing spaces approachable for everyone.

What it does

LINE BY LINE is an interactive room design application where users can visualize and arrange furniture using animated line-by-line drawings. Instead of displaying static 3D models or icons, every furniture item is rendered through smooth sketch animations, giving users a unique and engaging design experience. The app helps users experiment with layouts while making the design process more enjoyable and intuitive.

How I built it

I built LINE BY LINE using Next.js and React for the frontend, with TypeScript for type safety and maintainability. I used Tailwind CSS for responsive styling and Framer Motion to create smooth line-drawing animations and transitions. Furniture assets were converted into SVG-based illustrations that animate progressively, creating the signature "line-by-line" effect. The application architecture focuses on reusable UI components and responsive interaction for a seamless user experience.

Challenges I ran into

One of the biggest challenges was creating smooth SVG drawing animations while keeping performance responsive. I also had to design reusable animated components that worked consistently across different furniture types. Balancing visual polish with usability was another challenge—I wanted the animations to enhance the experience without slowing down the design workflow.

Accomplishments that I'm proud of Building a polished and responsive interactive interface. Creating a unique animated furniture visualization system. Successfully integrating smooth SVG line-drawing animations. Designing an experience that feels creative rather than technical. Delivering a working prototype within the hackathon timeframe. What I learned

Throughout the project, I gained a deeper understanding of SVG animation techniques, Framer Motion, and building reusable React components. I also learned the importance of balancing aesthetics with usability great animations should improve the experience, not distract from it. Most importantly, I learned how thoughtful UI design can transform a simple planning tool into something memorable.

What's next for LINE BY LINE

My vision is to turn LINE BY LINE into a complete interior design platform. Future plans include:

AI-powered room layout suggestions. Uploading room photos and generating interactive floor plans. Drag-and-drop furniture customization with real-world dimensions. A larger furniture library with multiple design styles. Real-time collaboration for families and design teams. AR support so users can preview layouts directly in their own spaces. Saving, sharing, and exporting room designs.

LINE BY LINE is just the beginning...I want to make interior design accessible, creative, and enjoyable for everyone.

Built With

Share this project:

Updates