Lucian UX/UI Prompt

[요소] 종이비행기 전송 버튼 (005)[요소 설명] 보내기 버튼을 누르면 버튼 속 종이비행기가 떠올라 고리를 한 바퀴 그린 뒤 화면 밖으로 날아가고, 지나간 자리에 점선 꼬리가 남았다 사라집니다. 그동안 버튼 둘레에 진행 고리가 돌고 체크로 바뀌며, 보낸 글은 말풍선이 되어 대화창에 올라갑니다. 잠시 뒤 새 비행기가 버튼으로 미끄러져 돌아옵니다.[조작] 보내기 버튼을 누르거나 입력칸에서 Enter를 눌러 보세요 아래 UI 요소를 제 프로젝트에 적용해 주세요. [먼저 확인할 것]1. 프로젝트의 프레임워크(React, Next, Vue, Svelte, 순수 HTML 등), 스타일 방식(CSS 모듈, Tailwind, 전역 CSS), 기존 테마 방식(data-theme, dark 클래스, CSS 변수)을 찾아 확인하세요.2. 삽입 위치의 파일과 기존 요소를 먼저 찾고, 그 요소가 어디서 쓰이는지 보고하세요. [적용 방법]3. 삽입 위치에 새 컴포넌트로 추가하세요. 교체 대상이 있으면 그 요소를 아래 요소로 바꾸세요.4. 기존 데이터, props, 이벤트 핸들러, 폼 값, 접근성 속성(라벨, aria, 키보드 조작)은 그대로 유지하세요.5. 아래 코드의 구조, 형태, 모션 값(시간, 곡선, 지연)을 기준으로 옮기세요. 프레임워크에 맞게 컴포넌트와 상태로 바꾸되, 디자인을 새로 추측해 바꾸지 마세요.6. 색은 아래 --ux-* 토큰을 프로젝트의 기존 테마 변수에 연결하세요. 라이트와 다크 두 값을 모두 유지하고, 두 테마에서 확인하세요.7. 스타일은 이 요소의 클래스(.uNNN) 안에만 두고, 전역 CSS나 전역 스크립트는 바꾸지 마세요. 클래스 이름이 기존 요소와 겹치지 않게 하세요.8. 예시 문구와 예시 데이터는 프로젝트의 실제 데이터로 바꾸세요. 갤러리 전용 화면과 시연 코드는 가져오지 마세요. 코드 맨 위의 라이선스 주석 한 줄은 새 컴포넌트 파일 맨 위에 남겨 두세요.9. prefers-reduced-motion을 켠 상태에서도 기능과 최종 상태가 그대로 작동하는지 확인하세요. [완료 보고]10. 변경한 파일 목록, 기존 요소와 달라진 동작, 확인한 범위(두 테마, 모바일 너비, 키보드), 확인하지 못한 항목을 알려 주세요. [삽입 위치] 여기에 페이지나 컴포넌트 이름을 적으세요[교체 대상] 기존 요소의 파일 경로나 컴포넌트 이름을 적으세요. 없으면 "없음" --- 코드 시작 (이 코드 전체가 실제로 동작하는 원본입니다) ---<!-- Lucian UX/UI Prompt #005 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#005 --><style>/* lucianLabs UI 요소 — 공통 테마 토큰 (라이트 / 다크)   라이트 기본값 → 시스템이 다크면 다크 → data-theme으로 명시하면 그 값을 우선합니다.   요소 CSS는 --ux-* 토큰만 참조하므로, 프로젝트 테마 변수에 이 값을 매핑하면 됩니다. */:root{  color-scheme:light;

[Element] Paper plane send button (005)[What it does] Press send and the paper plane inside the button lifts off, loops once and flies off the screen, leaving a dotted trail that fades away. Meanwhile a progress ring circles the button and turns into a check, and the message rises into the chat as a bubble. A moment later a new plane glides back into the button.[How to use it] Press the send button, or press Enter in the input Please add the UI element below to my project. [Check first]1. Find out the project’s framework (React, Next, Vue, Svelte, plain HTML, etc.), styling approach (CSS modules, Tailwind, global CSS) and existing theming approach (data-theme, a dark class, CSS variables).2. Locate the file and any existing element at the insertion point first, and report where that element is used. [How to apply]3. Add it as a new component at the insertion point. If there is a replacement target, replace that element with the one below.4. Keep existing data, props, event handlers, form values and accessibility attributes (labels, aria, keyboard support) as they are.5. Port the structure, shapes and motion values (durations, curves, delays) of the code below as they are. Convert it into components and state for the framework, but do not guess a new design.6. Map the --ux-* color tokens below to the project’s existing theme variables. Keep both the light and dark values and check both themes.7. Keep styles inside this element’s class (.uNNN) and do not change global CSS or global scripts. Make sure the class names do not clash with existing ones.8. Replace the sample copy and sample data with the project’s real data. Do not bring over gallery-only screens or demo code. Keep the one-line license comment at the top of the new component file.9. Check that the feature and its final states still work with prefers-reduced-motion turned on. [Report when done]10. List the files you changed, behavior that differs from the old element, what you checked (both themes, mobile width, keyboard) and anything you could not check. [Insertion point] Write the page or component name here[Replacement target] Write the file path or component name of the existing element, or "none" --- Code start (this whole code is the working original) ---<!-- Lucian UX/UI Prompt #005 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#005 --><style>:root{  color-scheme:light;  --ux-page:#F4F2EE;  --ux-surface:#FFFFFF;  --ux-surface-2:#F5F3EF;