흐르는 텍스트

떠다니는 객체 주위로 전체 화면 에세이의 텍스트가 실시간으로 재배치되는 조판 실험: 문자 단위 줄바꿈, 드래그 가능한 장애물, 열 제어 기능.

Loading preview...
이 프롬프트로 시작하기

떠다니는 객체 주변으로 전체 화면 에세이가 실시간으로 재배치되는 조판 실험입니다. 글자 단위 줄바꿈, 드래그 가능한 장애물, 열 제어 기능을 제공합니다.

Websites Agent 사용해 보기
실시간 텍스트 감싸기를 주제로 한 실험적 페이지를 만드세요. 화면을 조판에 관한 짧은 에세이로 채우고, 넉넉한 여백의 세리프 서체를 사용해 편안하게 읽을 수 있도록 하세요. 페이지 곳곳에 작은 객체 몇 개를 배치하고 스스로 떠다니며 충돌하게 하세요. 텍스트는 각 객체 주변을 실시간으로, 글자 단위로 측정해 감싸야 하므로 장애물이 레이아웃을 가로질러 움직일 때마다 에세이의 줄이 부드럽게 계속 새로 나뉘어야 합니다. 객체는 단순한 장식이 아닙니다. 방문자는 마우스로 어느 객체든 잡아 페이지 위로 끌고 가거나 던질 수 있으며, 그 뒤로 텍스트가 밀려나고 다시 메워지는 모습을 볼 수 있어야 합니다. 구성을 2열과 3열 사이에서 전환하고, 움직임을 일시 정지 및 재개하고, 장면을 초기화하고, 스크롤 휠로 전체 페이지를 확대·축소할 수 있는 제어 기능을 제공하세요. 모든 제어 기능은 별도 패널이 아니라 에세이의 일부처럼 느껴져야 하며, 객체가 아무리 혼란스럽게 움직여도 읽기 경험은 유연하게 유지되어야 합니다. 단일 파일 정적 페이지로 만드세요.
객체 편집 추가

작은 편집 기능을 추가합니다. 떠다니는 객체를 더블클릭하면 텍스트를 변경하거나 새 객체로 교체할 수 있고, 에세이는 편집된 객체 주변으로 실시간 재배치됩니다.

Websites Agent 사용해 보기
실시간 텍스트 감싸기를 주제로 한 실험적 페이지를 만드세요. 화면을 조판에 관한 짧은 에세이로 채우고, 넉넉한 여백의 세리프 서체를 사용해 편안하게 읽을 수 있도록 하세요. 페이지 곳곳에 작은 객체 몇 개를 배치하고 스스로 떠다니며 충돌하게 하세요. 텍스트는 각 객체 주변을 실시간으로, 글자 단위로 측정해 감싸야 하므로 장애물이 레이아웃을 가로질러 움직일 때마다 에세이의 줄이 부드럽게 계속 새로 나뉘어야 합니다. 객체는 단순한 장식이 아닙니다. 방문자는 마우스로 어느 객체든 잡아 페이지 위로 끌고 가거나 던질 수 있으며, 그 뒤로 텍스트가 밀려나고 다시 메워지는 모습을 볼 수 있어야 합니다. 구성을 2열과 3열 사이에서 전환할 수 있는 제어 기능을 제공하세요, 움직임을 일시 정지 및 재개하고, 장면을 초기화하고, 스크롤 휠로 전체 페이지를 확대·축소할 수 있어야 합니다. 모든 제어 기능은 별도 패널이 아니라 에세이의 일부처럼 느껴져야 하며, 객체가 아무리 혼란스럽게 움직여도 읽기 경험은 유연하게 유지되어야 합니다. 단일 파일 정적 페이지로 만드세요.
어두운 캔버스로 전환

세리프 서체와 넉넉한 여백은 유지한 채 실험의 배경을 어둡게 바꿔, 움직이는 객체와 재배치되는 텍스트가 더욱 강한 대비로 돋보이게 합니다.

Websites Agent 사용해 보기
실시간 텍스트 감싸기를 주제로 한 실험적 페이지를 만드세요. 화면을 조판에 관한 짧은 에세이로 채우고, 넉넉한 여백의 세리프 서체로 설정하세요 편안하게 읽을 수 있도록 하세요. 페이지 곳곳에 작은 객체 몇 개를 배치하고 스스로 떠다니며 충돌하게 하세요. 텍스트는 각 객체 주변을 실시간으로, 글자 단위로 측정해 감싸야 하므로 장애물이 레이아웃을 가로질러 움직일 때마다 에세이의 줄이 부드럽게 계속 새로 나뉘어야 합니다. 객체는 단순한 장식이 아닙니다. 방문자는 마우스로 어느 객체든 잡아 페이지 위로 끌고 가거나 던질 수 있으며, 그 뒤로 텍스트가 밀려나고 다시 메워지는 모습을 볼 수 있어야 합니다. 구성을 2열과 3열 사이에서 전환하고, 움직임을 일시 정지 및 재개하고, 장면을 초기화하고, 스크롤 휠로 전체 페이지를 확대·축소할 수 있는 제어 기능을 제공하세요. 모든 제어 기능은 별도 패널이 아니라 에세이의 일부처럼 느껴져야 하며, 객체가 아무리 혼란스럽게 움직여도 읽기 경험은 유연하게 유지되어야 합니다. 단일 파일 정적 페이지로 만드세요.
산세리프 설정 사용해 보기

에세이를 세리프 대신 대비가 높은 산세리프 서체로 바꿔, 같은 실시간 감싸기와 줄 재분할이 다른 타이포그래피 분위기에서 어떻게 느껴지는지 보여 줍니다.

Websites Agent 사용해 보기
실시간 텍스트 감싸기를 주제로 한 실험적 페이지를 만드세요. 화면을 조판에 관한 짧은 에세이로 채우고, 넉넉한 여백의 세리프 서체를 사용해 편안하게 읽을 수 있도록 하세요. 페이지 곳곳에 작은 객체 몇 개를 배치하고 스스로 떠다니며 충돌하게 하세요. 텍스트는 각 객체 주변을 실시간으로, 글자 단위로 측정해 감싸야 하므로 장애물이 레이아웃을 가로질러 움직일 때마다 에세이의 줄이 부드럽게 계속 새로 나뉘어야 합니다. 객체는 단순한 장식이 아닙니다. 방문자는 마우스로 어느 객체든 잡아 페이지 위로 끌고 가거나 던질 수 있으며, 그 뒤로 텍스트가 밀려나고 다시 메워지는 모습을 볼 수 있어야 합니다. 구성을 2열과 3열 사이에서 전환하고, 움직임을 일시 정지 및 재개하고, 장면을 초기화하고, 스크롤 휠로 전체 페이지를 확대·축소할 수 있는 제어 기능을 제공하세요. 모든 제어 기능은 별도 패널이 아니라 에세이의 일부처럼 느껴져야 하며, 객체가 아무리 혼란스럽게 움직여도 읽기 경험은 유연하게 유지되어야 합니다. 단일 파일 정적 페이지로 만드세요.