Shu showcases experimental folding sidebar concept 'shaduocn'

X postShuDemo

Shu (@shuding) shared an interactive frontend experiment called 'shaduocn sidebar', simulating a dual-screen folding mechanism for web sidebars. The author openly acknowledged that the concept is deliberately terrible UX built purely for fun.

Key points

  1. The 'Sidebar Duo' demo on Vercel showcases a folding sidebar interface with hinge-based animations.
  2. Includes controls for hinge angle, progressive blur, fold percentage, manual hinge scrubbing, and a slow-motion toggle.
  3. The interface is styled in the visual aesthetic of a shadcn-inspired metrics dashboard.
  4. Addressing critique about slow interactions, Shu confirmed it was terrible UX and simply an amusing idea.

Why it matters

The demo highlights modern CSS and 3D transformation capabilities when emulating physical hardware interactions, while serving as a lighthearted reminder of the difference between technical demonstrations and effective interface design.

Analysis

The project humorously blends the styling of shadcn-based components with dual-screen folding mechanics. While featuring sophisticated interaction details such as progressive blur and precise hinge scrubbing, Shu explicitly frames the project as a playful experiment rather than an ergonomic navigation pattern.

Original post

Shu

@shuding · 23 October 2026

shaduocn sidebar: t.co/ZDL6LjeqJ1 t.co/fT29l5GetM

908 likes37 replies372 bookmarks51.7k views

View on X
More posts in the thread (2)
  1. @clcombe Yeah it’s terrible UX, I just found the idea funny :)
  2. @zaochih Fixed!
Selected replies (5)
  • @object_nullll @shuding 在安卓 chrome 上看起来就像是碎屏的 iPhone duo t.co/PPzRLPHbF3
  • @imarikchakma @shuding I like the name shad-duo-cn :D
  • @vishalanton_ @shuding ASMR
  • @clcombe @shuding I don't understand why anyone would benefit from this - technically but slow and annoying if you have to toggle and use things. What's the UX outcome here?
  • @light_laughs @shuding It's falling apart on mobile....

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:shaduocn.vercel.app

    Interactive Foldable Sidebar Demo: Fold Lab

    The web application demonstrates a foldable sidebar featuring progressive blur effects within an application dashboard. It provides controls to inspect hinge angles, blur intensity, and fold progress alongside production metrics and deployment logs.

    Web development· Demo

  • X post:Harshit

    Open-source branding lab mixes shaders with branding assets

    Developer Harshit showcases a side project that evolved into a branding lab tool. The project combines graphic shaders with brand assets and is part of an open-source product.

    571bookmarks21.1kviews

    Web development· Tool

  • X post:Shadcn Labs

    pdfcn: Customisable PDF components for shadcn/ui

    Shadcn Labs highlighted pdfcn, a component library for designing accessible and customisable PDF documents. The library is built on Takumi and Forme and designed to work with shadcn/ui.

    935bookmarks109.4kviews

    Web development· Tool

  • X post:Aniket Pawar

    Announcement of Shadcn Labs: Primitives for the AI Era

    Aniket Pawar has announced Shadcn Labs, an effort to build developer primitives adapted for the AI era. Echoing the naming conventions of the popular UI ecosystem, the project mentions tools such as termcn, agentcn, and mcpcn.

    173bookmarks21.1kviews

    AI & LLMs· Announcement

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.