Dots UI — 모양을 바꾸는 파티클 인터페이스용 React 라이브러리

AI 요약

Dots UI는 파티클 모양을 인터페이스 요소로 활용하는 React 라이브러리입니다. AI, 생산성, 미디어, 커머스, 내비게이션 등 여러 범주의 모양 171개를 제공하며, 준비된 컴포넌트를 앱에 넣어 사용할 수 있습니다.

모양 전환과 사용자화

같은 파티클 시스템을 유지하면서 한 모양에서 다른 모양으로 부드럽게 전환합니다. 입자, 움직임, 크기, 동작을 조정할 수 있고, Studio에서 직접 만든 모양을 내보내 프로젝트에 적용할 수 있습니다. 제작자는 로딩 표시, 인터랙티브 상태, 컨트롤, 시각 효과 등에 활용할 수 있다고 소개합니다. 무료로 탐색하고 사용할 수 있으며, 더 많은 모양과 설정을 제공하는 Pro 버전도 있습니다.

Product Hunt 반응

• @hamza_al_sorkhy — 안녕하세요, Product Hunt! 저는 Hamza입니다. 파티클로 만든 모핑 인터페이스가 멋져 보여 React에서 쉽게 만들고 싶어 Dots UI를 제작했습니다. 시각 실험으로 시작해 서로 모양을 바꾸는 171개 모양을 갖춘 라이브러리가 됐습니다. AI, 생산성, 미디어, 커머스, 내비게이션 등 170개가 넘는 모양, 같은 파티클 시스템을 쓰는 모핑, 일반 UI처럼 제어하는 React 컴포넌트, 직접 모양을 만들어 내보내는 Studio, 파티클과 움직임, 크기, 동작을 조정하는 기능을 담았습니다. 파티클 시스템을 처음부터 만들지 않고도 더 생동감 있는 인터페이스를 쉽게 만들자는 취지입니다. 무료로 탐색하고 사용할 수 있고, 더 많은 모양과 설정을 담은 Pro 버전도 있습니다. 사람들이 무엇을 만드는지, 다음에 어떤 모양을 추가하면 좋을지 보고 싶습니다. ❤️
  • @saverio_donati — 로딩이 끝나거나 버튼을 눌렀을 때처럼 직접 상태에 따라 모핑을 실행할 수 있나요? 아니면 타이머에 따라 움직이나요?
  • @hamza_al_sorkhy — 네! 원하는 대로 직접 작성한 코드에서 실행할 수 있습니다!
  • @amanda_ornellas_gutierres — 모핑 기능부터 써보고 싶습니다. 로딩 점이 같은 파티클로 체크 표시가 되면 아이콘을 바꾸는 것보다 훨씬 자연스러워 보여요.
• @furkan_savrun — 멋진 작업입니다, Hamza. Next.js 웹 앱과 Expo 모바일 앱을 모두 만드는 1인 개발자로서 성능과 이식성이 먼저 궁금합니다. 내부적으로 Canvas, WebGL, SVG 중 무엇으로 렌더링하나요? 중급형 휴대전화에서는 성능이 어떤가요? React Native 버전이나 React 밖에서도 쓸 수 있도록 모양을 내보내는 기능을 계획하고 있나요?
• @galdayan — 데모 영상은 멋지지만, 파티클 모핑을 장식이 아니라 실제 인터페이스 요소로 쓰는 데는 조금 반대하고 싶습니다. 로딩 상태나 버튼을 단순한 모양 대신 파티클로 만들면 prefers-reduced-motion 설정을 쓰는 사용자와 스크린 리더는 유용한 정보를 얻지 못할 수 있습니다. 움직임을 끈 상태나 느린 연결에서 파티클이 아직 렌더링되지 않았을 때 무엇을 알리거나 정적 대체 화면으로 보여주나요?

원문: Product Hunt / 번역·요약: Trawling