Project page for GRASP: Recovering Gradients for Contact-Rich Trajectory Optimization.
Authors: Yang Liu*, Tong Wang*, Yiming Bao, Heng Yang.
Published at https://computationalrobotics.seas.harvard.edu/GRASP/ using GitHub Pages from the root of main.
Run python3 -m http.server 8765 here and open http://localhost:8765.
The page opens on unobstructed video. The first downward scroll slides in the title, authors, institutional logos, and navigation while the background remains pinned. Four backgrounds rotate independently every 7 seconds:
- Real dex — dexterous-hand demo mosaic.
- Real humanoid — humanoid demo mosaic.
- Sim dex — empty, reserved for future simulation video.
- Sim humanoid — empty, reserved for future simulation video.
Pagination buttons change the background without moving the page and restart the 7-second interval. The global pause button, reduced-motion preference, hidden tab, or offscreen hero suspend automatic rotation. The two simulation stages retain their empty placeholders until footage is available.
Below the introduction, real-world demonstrations are separated into dexterous-hand (10 videos) and humanoid (7 videos) sections. The two simulation galleries intentionally remain empty.
The supplied GRASP videos are converted to H.264 MP4 at 960 × 540, 24 fps, 2× source speed, with audio and source metadata removed. The originals are unchanged. The playback rate is baked into the files: JavaScript should not double it again. Hero videos are 16-second, 1920 × 1080 mosaics with 3 rows and 4 columns. The middle row’s two central tiles feature pumpkin-lantern lifting and whiteboard erasing for dex, and box lifting and pushing for humanoid. Existing clips fill the remaining 2 dex / 5 humanoid slots as temporary repeats. hero-layout.json records the exact row-major arrangement; rebuild with python3 scripts/build-hero.py /path/to/ffmpeg. The existing 2× clips are used without further acceleration. Short clips loop within the mosaics.
media.json lists the title, group, video, poster, and encoded speed for each clip. To add simulation demos, extend the gallery containers and manifest group handling in app.js, and replace the corresponding empty hero background in index.html with a video.
Offscreen videos are paused; gallery clips are loaded near the viewport. The global pause control stops all videos. Reduced-motion preferences disable autoplay. Native controls support scrubbing and fullscreen.
index.html: title, authors, four hero backgrounds, and four demo sections.styles.css: responsive layout and dark-to-light transition.app.js: scroll stages, media loading, video controls.media.json: demo manifest.media/: web video and poster derivatives.
No private Overleaf link, inferred author affiliations, or unpublished paper link is exposed. The structural reference is InterMimicGen; the implementation and all displayed media belong to this project. Assets from the earlier figure-based draft remain available but are no longer displayed.
Harvard crimson: #A51C30, per the Harvard SEAS palette. Light text is retained over dark video for legibility.
Institutional logo sources (the Harvard shield is extracted from the official SVG without changing its paths; the wordmark is omitted):
- Harvard University: https://www.harvard.edu/wp-content/themes/core/assets/img/theme/branding-assets/footer-logo.svg
- Computational Robotics Group: https://computationalrobotics.seas.harvard.edu/lab_logo-horz-white-01.PNG
