流动文字

一项排版实验:全屏短文会实时绕开漂浮物重新排版,包括逐字断行、可拖拽障碍物和分栏控制。

Loading preview...
使用此提示词开始

一项排版实验:全屏短文会实时绕开漂浮物重新排版,包括逐字断行、可拖拽障碍物和分栏控制。

体验建站智能体
创建一个关于实时文本绕排的实验页面。用一篇关于排版的短文铺满屏幕,采用衬线字体并留出充足的留白,确保阅读舒适。在页面上散布几个小物件,让它们自行漂浮和碰撞;文本必须实时绕开每个物件,并逐字测量,使短文的各行随着障碍物在布局中移动而持续平滑地重新断行。这些物件不只是装饰:访客可以用鼠标抓住任意物件,在页面上拖动并抛出,看着文字为它让路,又在它身后重新合拢。提供控制项,可在两栏和三栏布局之间切换、暂停和继续运动、重置场景,并用滚轮缩放整个页面。每个控制项都应像短文本身的一部分,而不是独立的面板;无论物件如何混乱,阅读体验都应保持流畅。单文件静态页面。
添加物件编辑功能

新增一项小型编辑功能:双击任意漂浮物即可修改其文字或替换为新内容,短文会实时绕开编辑后的物件重新排版。

体验建站智能体
创建一个关于实时文本绕排的实验页面。用一篇关于排版的短文铺满屏幕,采用衬线字体并留出充足的留白,确保阅读舒适。在页面上散布几个小物件,让它们自行漂浮和碰撞;文本必须实时绕开每个物件,并逐字测量,使短文的各行随着障碍物在布局中移动而持续平滑地重新断行。这些物件不只是装饰:访客可以用鼠标抓住任意物件,在页面上拖动并抛出,看着文字为它让路,又在它身后重新合拢。 提供控制项,可在两栏和三栏布局之间切换、暂停和继续运动、重置场景,并用滚轮缩放整个页面。每个控制项都应像短文本身的一部分,而不是独立的面板;无论物件如何混乱,阅读体验都应保持流畅。单文件静态页面。
切换至深色画布

将实验改为深色背景,同时保留衬线字体和充足留白,使移动的物件与重新排版的文字呈现更强的对比。

体验建站智能体
创建一个关于实时文本绕排的实验页面。用一篇关于排版的短文铺满屏幕,采用衬线字体并留出充足的留白,确保阅读舒适。在页面上散布几个小物件,让它们自行漂浮和碰撞;文本必须实时绕开每个物件,并逐字测量,使短文的各行随着障碍物在布局中移动而持续平滑地重新断行。这些物件不只是装饰:访客可以用鼠标抓住任意物件,在页面上拖动并抛出,看着文字为它让路,又在它身后重新合拢。提供控制项,可在两栏和三栏布局之间切换、暂停和继续运动、重置场景,并用滚轮缩放整个页面。每个控制项都应像短文本身的一部分,而不是独立的面板;无论物件如何混乱,阅读体验都应保持流畅。单文件静态页面。
尝试无衬线字体排版

将短文改用高对比度无衬线字体,而非衬线字体,展示相同的实时绕排和重新断行在不同字体风格下的感受。

体验建站智能体
创建一个关于实时文本绕排的实验页面。用一篇关于排版的短文铺满屏幕,采用衬线字体并留出充足的留白,确保阅读舒适。在页面上散布几个小物件,让它们自行漂浮和碰撞;文本必须实时绕开每个物件,并逐字测量,使短文的各行随着障碍物在布局中移动而持续平滑地重新断行。这些物件不只是装饰:访客可以用鼠标抓住任意物件,在页面上拖动并抛出,看着文字为它让路,又在它身后重新合拢。提供控制项,可在两栏和三栏布局之间切换、暂停和继续运动、重置场景,并用滚轮缩放整个页面。每个控制项都应像短文本身的一部分,而不是独立的面板;无论物件如何混乱,阅读体验都应保持流畅。单文件静态页面。