Meursyphus

I'm web developer
I made this:

[Meursyphus @meursyphus]

A flowchart node can hold a little chart.

In my Flitter Diagram demo, switching Card → Chart replaces the node UI. The engine still handles dragging, connections, and history.

https://t.co/dMDsCNlEhv

#BuildInPublic #DataViz #JavaScript

[Meursyphus @meursyphus]

Every page in this demo moves upward, even when you go back.

That's ssgoi's scroll({ type: 'non-directional' }). The directional version follows the route order instead. Useful for full-page showcases and chapters.

#Frontend #WebAnimation #OpenSource

[Meursyphus @meursyphus]

참고 사이트가 없어도, 원하는 분위기부터 이야기할 수 있어요.

컴윗으로 만든 도자기 쇼핑몰 ‘흙결’입니다. 그릇의 질감과 넉넉한 여백으로 공방 같은 느낌을 냈어요. 브랜드에 맞는 쇼핑몰 제작을 컴윗에서 함께합니다.

https://t.co/APuonDU7KQ
#쇼핑몰제작 #바이브코딩

[Meursyphus @meursyphus]

A sideways slide can suggest that two pages have an order. Sometimes they don't.

ssgoi's fade() is a quiet fallback for unrelated routes. Give that rule a low priority so more specific transitions still win.

#Frontend #UX #OpenSource

[Meursyphus @meursyphus]

카페24·아임웹 외주하시는 분들, 컴윗 메이커스에서 함께해요.

AI로 디자인·기능을 만들고, 막히면 무료 컴윗 케어에 질문할 수 있어요. 제작자 플랫폼 이용료는 없고 호스팅은 고객이 직접 결제해요.

https://t.co/APuonDU7KQ
참여 상담: https://t.co/sUw557dz6p
#바이브코딩

[Meursyphus @meursyphus]

예약 앱을 만들기 전, 카톡으로 예약 몇 건을 받아보는 것도 방법이에요.
반복해서 묻는 질문과 빠뜨리는 정보를 보고 첫 기능을 정할 수 있으니까요.

컴윗 블로그에는 직접 해본 업무를 제품으로 만드는 순서도 적어두었어요.
https://t.co/APuonDU7KQ
#창업 #AI

[Meursyphus @meursyphus]

The blur behind this sheet comes from a live backdrop.

ssgoi uses backdrop-filter here. On older Firefox versions without it, the sheet still moves, scales the background, and dims it. Only the blur drops out.

#Frontend #CSS #WebAnimation

[Meursyphus @meursyphus]

6병인지 12병인지, 가격까지 버튼에서 바로 보여줘요.

컴윗으로 만든 주스 쇼핑몰 ‘그린로우’. 선물 세트 구성을 고르면 선택 표시와 총액이 함께 바뀝니다. 메인·상세 캡처와 결과물 링크를 붙여요.

https://t.co/NztaJQh2cO
#바이브코딩 #웹디자인

[Meursyphus @meursyphus]

A small perspective turn changes how a page swap feels.

ssgoi's strip() moves both pages past each other with a shallow tilt, like cards changing places. Keep overflow-x: clip on the layout shell to contain the horizontal motion.

#Frontend #WebAnimation #OpenSource

[Meursyphus @meursyphus]

AI에게 같은 주의사항을 반복하다가 라이브러리까지 만들었어요.

지침을 주고, 검사 도구를 붙이고, 반복할 처리는 Comwit State에 넣었습니다. 컴윗에서 AI용 도구까지 만드는 이유를 적었어요.

https://t.co/Eg3lQlIQUm
#바이브코딩 #개발

[Meursyphus @meursyphus]

Those viewfinder corners are part of the transition.

ssgoi's film() combines multiple springs with temporary corner elements. I'd save this one for opening a gallery or lightbox, where the extra motion has a reason to be there.

#Frontend #WebAnimation #OpenSource

[Meursyphus @meursyphus]

이 쇼핑몰, 프롬프트 한 번으로 뽑았어요.

컴윗으로 만든 아이웨어 쇼핑몰 ‘윤슬’.
물빛을 담은 메인과 선글라스 상품 상세 화면입니다. 직접 둘러볼 수 있게 결과물 링크도 붙여요.

https://t.co/dLpsZq8tuC
#바이브코딩 #웹디자인

[Meursyphus @meursyphus]

Watch the page underneath.

In ssgoi's drill transition, the new page slides in from the right while the old one moves just a little to the left. That difference in travel gives list-to-detail navigation a sense of depth.

#BuildInPublic #Frontend #WebDev

[Meursyphus @meursyphus]

버튼만 보지 않고 페이지째 확인해요.

컴윗 템플릿의 Storybook은 실제 페이지·레이아웃·상태 로직을 그대로 쓰고 API 호출만 테스트 데이터로 바꿔요. 기본 화면과 폼 오류 예시를 함께 볼 수 있어요.

https://t.co/Zihlxa8r28
#프론트엔드 #Storybook

[Meursyphus @meursyphus]

The thumbnail and the full-size photo don't need the same crop.

ssgoi's hero transition crossfades the two images as they move between their page positions. Matching keys tell it which images belong together.

#BuildInPublic #Frontend #WebDev

[Meursyphus @meursyphus]

운동 안 했다고 눌러도 5점 줍니다 ㅋㅋ

컴윗으로 만든 습관 앱 ‘해써’.
‘했다’는 30점, ‘안 했다’도 5점이라 못한 날도 기록할 수 있어요.
사진은 홈페이지의 오늘 화면 미리보기예요.

https://t.co/9hUZU2AfNr
#바이브코딩 #습관

[Meursyphus @meursyphus]

A booking flow has an order. Its transitions can follow it.

In ssgoi, ordered route rules define forward and backward. Here's axis({ type: 'x' }) moving between screens with a horizontal shift and fade.

#BuildInPublic #Frontend #WebDev

[Meursyphus @meursyphus]

@saltyAom I like accent

[Meursyphus @meursyphus]

“카카오 로그인 붙여줘.”
버튼은 생겼는데 AI가 키랑 콜백 주소를 달래요.

콜백은 로그인 결과를 돌려받을 주소예요. 홈페이지 주소와 다를 수 있고요.
컴윗 블로그에 카카오·구글·네이버 설정 순서를 정리했어요.

https://t.co/SdkTRAxSti
#바이브코딩

[Meursyphus @meursyphus]

The detail page opens from the photo you tapped.

In ssgoi's zoom transition, the selected image anchors the whole page as it expands. Matching image keys connect the thumbnail to the detail view.

#BuildInPublic #Frontend #WebDev