Resizable Window

A window that emulates… all your other windows. Have fun, and build prototypes so real you start to forget what is or isn’t a prototype on your desktop.

Styles

macOS, Safari, Chrome, Firefox, and None (fullscreen app)

Cool things about this

• Set minimum width + height
• Choose whether it’s scrollable or not (fullscreen app)
• Quick responsive design using @Steve Ruiz’s magical responsiveness component that’s built in
• Overrides for sticky elements, parallax, and more
• I built it

Demo

---

For the hardcore (Overrides)

Add this ↓ to the window

const data = Data({
    top: Animatable(0),
    staticTop: 0,
    height: 400,
    width: 400
});

export const AddWindowEvents: Override = () => {
    return {
        onScroll(top) {
            data.top = top;
            data.staticTop = top;
        },
        onHeightChange(height) {
            data.height = height;
        },
        onWidthChange(width) {
            data.width = width;
        }
    };
};

Add these ↓ to things in the Frame

export const windowHeight: Override = () => {
    return {
        height: data.height
    };
};

export const windowWidth: Override = () => {
    return {
        width: data.width
    };
};

export const Sticky: Override = () => {
    return {
        top: data.top,
    };
};

export const StickyWithinRange: Override = () => {
    return {
     // NOTES: 200=where sticky starts, 400=where sticky ends
        top: Math.min(Math.max(data.staticTop, 200), 400),
    };
};

export const Parallax: Override = () => {
    return {
     // NOTES: play with the decimal and yValue to get what you want 
        top: data.staticTop * 0.5 + 200
    };
};

Reach out if you have any feedback, i’d love to hear it.

✉️ maxsteitle@me.com