Pedestal

페디스털

The camera moves straight up or down to change its height.

···
html
<div class='frame'><div class='track'><i class='tick'></i><i class='tick'></i><i class='tick'></i><b>HEIGHT</b><div class='camera'><i></i><span></span></div></div><div class='view'><div class='horizon'></div><div class='blocks'><i></i><i></i><i></i></div><b>LEVEL VIEW</b></div></div>
css
.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.track{position:absolute;left:8%;top:9%;bottom:20%;width:17%;border-left:3px solid var(--line);display:flex;flex-direction:column;justify-content:space-around}
.tick{width:13px;height:1px;margin-left:-3px;background:var(--muted)}
.track>b{position:absolute;left:12px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font:700 clamp(7px,1.8vmin,10px) ui-monospace,monospace;letter-spacing:.13em;color:var(--muted)}
.camera{position:absolute;left:-13px;top:8%;width:30px;height:20px;border:2px solid var(--accent);background:var(--surface);animation:elevate 4s ease-in-out infinite}
.camera i{position:absolute;right:-8px;top:5px;width:8px;height:7px;border:2px solid var(--accent);border-left:0}
.camera span{position:absolute;left:9px;bottom:-7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.view{position:absolute;inset:12% 8% 24% 34%;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#b6d3ce 0 53%,#d9cba4 53% 100%)}
.horizon{position:absolute;left:0;right:0;top:53%;height:1px;background:var(--surface)}
.blocks{position:absolute;inset:0;animation:framing 4s ease-in-out infinite}
.blocks i{position:absolute;bottom:18%;width:18%;height:42%;background:var(--accent-3);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.blocks i:nth-child(1){left:12%;height:30%}
.blocks i:nth-child(2){left:41%;height:53%;background:var(--accent)}
.blocks i:nth-child(3){right:9%;height:38%;background:#607c69}
.view>b{position:absolute;left:5%;top:5%;font:700 clamp(7px,1.8vmin,10px) ui-monospace,monospace;letter-spacing:.1em;color:var(--muted)}
.frame:after{content:'';position:absolute;left:34%;right:8%;bottom:11%;height:2px;background:var(--line)}
@keyframes elevate{0%,8%{top:8%}52%{top:72%}92%,100%{top:8%}}
@keyframes framing{0%,8%{transform:translateY(20%)}52%{transform:translateY(-17%)}92%,100%{transform:translateY(20%)}}

The whole camera rises or lowers, like standing on a lift. Its viewing direction stays level, so the horizon and vertical edges do not tilt.

Raise or lower a tripod column or lift, or keyframe the virtual camera's height coordinate. In the frame, the subject shifts up or down as the camera changes height.

A tilt rotates the view while a pedestal moves the camera itself. Keep the horizon level to make the difference easy to see.

When to use

Use it to reveal information at another height or meet a subject at eye level. Keeping the horizon level helps distinguish it from a tilt.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.