스프링의 운동 그래프를 표시하는 애플리케이션을 생성하세요. 슬라이더를 사용해 강성 및 질량을 조절할 수 있는 컨트롤을 포함하며, 애플리케이션은 슬라이더 값 변경에 따라 진동 곡선을 실시간으로 업데이트 해야 합니다. 그래프는 시간에 따른 변위를 그리드와 레이블, 추가 세부 사항과 함께 표시하고, 동시에 스프링의 움직임을 시각적으로 애니메이션 처리합니다.

## 기능

- **슬라이더**: 강성 및 질량 조절을 위한 슬라이더를 포함하여 사용자가 스프링의 특성을 쉽게 조작할 수 있습니다.
- **실시간 업데이트**: 슬라이더 값을 조절할 때마다 그래프가 실시간으로 업데이트되어 스프링의 동적 움직임을 반영합니다.
- **그래프 구성 요소**:
  - 시간(x축)과 변위(y축)에 대한 명확한 레이블이 붙은 그리드를 표시합니다.
  - 시간에 따른 힘, 가속도, 속도 등의 추가 정보를 포함합니다.
- **스프링 애니메이션**: 그래프와 동기화된 스프링의 움직임 애니메이션을 제공하여 직관적인 이해를 돕습니다.

## 동적 데이터 표시

- 시뮬레이션 중 변화하는 힘, 가속도, 속도의 실시간 값을 명확하고 직관적으로 표시합니다.

## 모바일 최적화

- 모바일 기기에 최적화된 레이아웃으로, 그래프와 컨트롤을 중앙에 배치하여 명확한 가시성을 확보합니다.
- 다양한 화면 크기에서도 원활한 사용을 보장하기 위해 반응형 디자인 기법을 사용합니다.

## 사용자 상호작용

- 사용자가 컨트롤을 조정할 때 부드러운 전환 효과를 제공하며, 직관적인 탐색과 참여를 위한 최고의 사용자 경험을 구현합니다.

Создайте приложение для отображения графика движения пружины. Пользователи смогут регулировать жесткость и массу с помощью ползунков, а приложение будет обновлять кривую колебаний в реальном времени. График будет представлять зависимость смещения от времени с сеткой, метками и дополнительными деталями, а также визуальной анимацией движения пружины.

Нужно побольше всяких контролов, выводить динамические данные силы, ускорения, скорости итд.

Страница должна быть сверстана под мобильный телефон визуализация должна быть хорошо видна по центру экрана.

Q: Какие конкретные контролы вам нужны?
A: Например, ползунки для жесткости и массы.

Q: Какую информацию вы хотите отображать в динамических данных?
A: Сила, ускорение, скорость и их значения во времени.